Tuesday, May 14, 2013

Memainkan Audio di Web Menggunakan HTML5

Sampai sekarang belum adanya patokan standar yang digunakan untuk memainkan suatu file audio pada situs web, sehingga browser satu dengan lainnya memerlukan plug-in berbeda untuk melakukan hal itu.

Di HTML5 ada satu elemen bernama AUDIO, dia digunakan untuk memainkan file audio pada situs web.

Contoh berikut menggunakannya untuk memainkan file audio dangdut ABG TUA di web:

<AUDIO CONTROLS="controls" SRC="abg_tua.mp3"> </AUDIO>

CONTROLS, atribut itu untuk menampilkan audio controls, seperti tombol play, stop, pause, dll. SRC (atribut wajib yang harus ada), dia itu untuk menetapkan URL dari file audio yang ingin dimainkan - untuk contoh di atas abg_tua.mp3.

Atribut lain untuk elemen AUDIO adalah:

AUTOPLAY="autoplay"
Atribut AUTOPLAY berguna agar ketika audio telah siap (browser pertama kali muat), audio itu akan langsung dimainkan, tanpa harus menekan tombol play. Atribut AUTOPLAY sering digunakan ketika atribut CONTROLS tidak digunakan, opsional. Sebagai contoh:

<AUDIO SRC="abg_tua.mp3" AUTOPLAY="autoplay"> </AUDIO>

LOOP="loop"
Atribut LOOP berguna agar audio start kembali, setiap kali audio itu telah selesai main. Sebagai contoh:

<AUDIO SRC="abg_tua.mp3" LOOP="loop"> </AUDIO>

PRELOAD=["auto","metadata","none"]
Atribut PRELOAD bisa kita gunakan untuk menetapkan bagaimana cara file audio dimuat oleh browser ketika halaman pertama kali muat (ditampilkan).

IE9, Firefox, Opera, Chrome, dan Safari mendukung AUDIO. Tetapi, IE8 dan versi sebelumnya, tidak mendukung AUDIO. Saat ini, ada 3 format file yang didukung untuk AUDIO: MP3, Wav, dan Ogg.

  • IE9 mendukung MP3.
  • Firefox 4.0 mendukung Mav dan Ogg.
  • Chrome 6 mendukung MP3, Wav, dan Ogg.
  • Apple Safari 5 mendukung MP3 dan Mav.
  • Opera 10.6 mendukung Mav dan Ogg.

Untuk dukungan format file audio di atas berlainan untuk setiap browser. Semisal cotoh kasus ketika saya mempunyai kode berikut:

<AUDIO CONTROLS="controls" SRC="abg_tua.mp3"> </AUDIO>

Kode di atas hanya IE9, Google Chrome 6, dan Apple Safari 5 saja yang akan menjalankan file format audionya.

Bagaimana dengan Firefox 4.0 dan Opera 10.6 untuk antisipasinya?

Antisipasinya dengan melibatkan elemen SOURCE, dan menjadi berikut bentuknya:

<AUDIO CONTROLS="controls"> <SOURCE SRC="abg_tua.mp3"> <SOURCE SRC="abg_tua.ogg"> </AUDIO>

Lihat pada kode yang diberikan warna biru, itulah antisipasi untuk browser Firefox 4.0 dan Opera 10.6. Begitupun untuk kasus-kasus yang sebaliknya.