Salah satu tag semantik HTML5 terbaru yang dapat dipakai developer web untuk memperkaya fitur aplikasinya adalah tag audio. Penggunaan tag audio ini sama sekali tidak membutuhkan plugin sejenis flash atau silverlight. Tag audio HTML5 merupakan spesifikasi semantik terbaru HTML yang mempunyai fungsi sebagai berikut :
- Mendeteksi input audio dari device internal maupun eksternal
- Memutar file audio yang didukung HTML5
- Bahkan kita bisa menggunakan audio HTML5 untuk menerapkan speech to text pada aplikasi web
HTML5 Audio
Jika pembaca pernah mengunjungi website SoundCloud atau mungkin sering berkunjung kesana. Seperti itulah penerapan tag audio HTML5 yang sudah dimodifikasi sehingga dapat menampilkan efek audio equalizer yang memukau. Untuk mempelajari bagaimana tag <audio> HTML5 berfungsi, kita juga harus mengetahui tipe audio apa saja yang didukung oleh HTML5.
Berikut adalah ringkasan tipe ekstensi jenis file audio dan browser yang didukung oleh semantik baru audio HTML5 :
| No | Tipe Audio | Browser |
|---|---|---|
| 1 | OGG vorbis | Google Chrome | Firefox | Opera | Safari |
| 2 | WAV pcm | Google Chrome | Firefox | Opera | Safari |
| 3 | MP3 | Google Chrome | Firefox | Internet Explorer | Safari |
| 4 | AAC | Google Chrome | Firefox | Internet Explorer | Safari |
| 5 | WEBM vorbis | Google Chrome | Firefox | Opera |
| 6 | OGG opus | Google Chrome | Firefox |
Seiring berkembangnya teknologi dan update terbaru, dari semua browser yang saya rangkum dari data Wikipedia di atas. Kemungkinan terjadinya dukungan untuk masing-masing browser sangatlah mungkin. Jadi saya sarankan untuk selalu mengupdate browser ke versi terbaru.
Menerapkan tag audio seperti halnya di situs SoundCloud memang sangat rumit. Tapi disini kita akan mencoba basis standar tag HTML5 audio untuk pemakaian secara sederhana. Berikut adalah kode yang dapat kita tulis :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <audio width=”300” height=”32” preload=”auto” src=”http://labs.mkhuda.com/sources/Fatin.ogg” controls=”controls” loop=”loop“> | |
| </audio> |
by Hasil yang ditampilkan di browser Chrome Canary saya adalah seperti audio control di bawah ini. Anda bisa langsung klik tombol Play untuk mendengarkan musik Fatin versi HTML5. Pastikan koneksi internet Anda tidak lelet. Dan matikan IDM agar tidak mengganggu prosesi pemutaran audio. 
Pada praktik tersebut, saya menggunakan file lagunya Fatin Shidqia Lubis berjudul Grenade
yang telah saya convert ke dalam ekstensi OGG vorbis untuk dukungan semua browser. Converter yang saya gunakan adalah Audacity. Go Fatin, Go ! Wkwkwkkw
