Wednesday, October 23, 2013

SoundManager2, Play audio di Web


Pada acara GDG DevFest di surabaya kemaren, ada presentasi mengenai Web audio API yang dilakukan oleh Yohan Totting, founder dari ThinkRooms. Materi ini menarik karena memang saya belum pernah dengar  web audio API. Sebelum itu saya beranggapan bahwa satu-satunya cara standar main audio di web adalah dengan tag audio pada HTML5. Dengan diperkenalkan web audio API terdapat standar baru yang coba diperkenalkan untuk memperbaiki kekurangan tag audio pada HTML5. Kekurangan ini mengenai perbedaan dukungan format audio disetiap browser dan juga kurangnya power yang dimilikinya. Firefox tidak dapat memainkan audio format MP3 dan MPEG4/HE-AAC/H.264 karena memang audio ini merupakan audio non-free, proprietary. Apple dan chrome memiliki lisensinya sehingga mereka dapat memainkan file-file audio ini. Masalah ini tentunya merupakan masalah yang serius, karena setiap browser memiliki daftar format audionya masing-masing. Baca artikel berikut untuk mengetahui lebih detail problem apa yang ada pada tag audio HTML5.  

Web audio API sejauh yang saya pelajari menarik banget. Kita bisa mengatur equalizer, manambah beberapa efek audio, menampilkan visualizer dan lainnya. Tapi saya sih masih menganggap terlalu awal mengimplementasikan web audio API. Teknologi ini merupakan teknologi yang baru saja diperkenalkan. Chrome, safari dan firefox versi terbaru saja yang baru mendukung. Sedangkan versi-versi lain yang berada dibawahnya masih harus menggunakan tag audio HTML5 sebagai satu-satunya solusi standar untuk audio web.

Menurutku sih satu cara terbaik masih dipegang oleh flash. Maksud saya disini adalah flash audio yang ada pada flash player. Dengan engine audio ini, lisensi tidak ditanggung oleh browser pengguna. Implementasi audio pada web atau game akan sama pada setiap browser karena memang dilakukan oleh flash player. Apa yang kita lakukan disini memang tidak standar, tapi akan solve problem yang kita punya.

Satu librari javascript yang dapat diandalkan untuk urusan ini adalah SoundManager2. Menurutku librari ini sangat-sangat bagus, idenya adalah menggunakan audio flash sebagai fallback audio player tapi status dan kontrolnya masih dapat dibuat dengan javascript dan HTML5. Menarik bukan!! kita dapat membuat tampilan player pake CSS dan HTML5 sedangkan engine audio pake flash. Hanya beberapa baris kode javascript, audio akan berjalan lancar pada semua browser. Tapi pertanyaannya, bagaimana jika browser pengguna tidak install flash player, bukankah tidak akan jalan? yang pasti engine audio flash tidak akan jalan, tapi SoundManager2 cukup pintar karena dia akan memilih alternatif yang dapat didukung oleh browser pengguna. Disini kita pun dapat memilih engine audio apa yang mau digunakan, apakah html5 audio atau flash audio dan prioritas mana yang didahulukan. Dan jangan khawatir, kita tidak akan berhubungan langsung dengan script-script flash karena memang engine audio flash bekerja dibalik layar pada SoundManager2 :D_.  

Ukuran file SoundManager2 sangat kecil, hanya berukuran 11KB untuk Build-script optimized, minified, no-debug version. Sedangkan untuk versi originalnya masih hanya berukuran 41KB. Website social music yang biasa kita kenal seperti 8track, SoundCloud, LastFM setahu saya memanfaatkan SoundManager2 untuk audio librari. Beberapa feedback dari beberapa orang yang saya baca dari dokumentasi SoundManager2, bahwa mereka telah memanfaatkan librari ini untuk membangun beberapa website yang bertema:

  1. Scripted language tutorials
  2. Spoken word/audio assistance
  3. Ringtone/music previews
  4. Musician/artist web site soundtracks
  5. Web-based chat  

Terlihat banyak banget yang bisa kita lakukan dengan SoundManager2. Beberapa bulan lalu saya membuat sebuah theme wordpress yang bertema musik. Dalam theme ini, saya menginginkan user dapat mengupload beberapa format audio standar dan tidak akan ada masalah ketika pengunjung memainkan semua file audio yang user upload tersebut. Dalam theme, saya membuat beberapa macam player yang user dapat pilih dan mendukung beberapa file audio standar seperti mp3, m4a, ogg, wav dll. Proses develop sangat-sangat simple karena saya juga menggunakan SoundManager2. Disini saya menemukan bahwa librari ini memang sangat brillian. Dan terakhir saran saya, jika menginginkan membangun sebuah website yang sejenis diatas, cobalah untuk riset mengenai SoundManager2. Trims udah membaca, semoga bermanfaat :D_.

No comments:

Post a Comment