Cara Menampilkan Audio dengan HTML5

Assalamu'alaikum Warahmatullahi Wabarakatuh..
Logo HTML5
     Pada artikel kali ini kita akan membahas salah satu fitur baru dari HTML5, yaitu cara menambahkan audio pada sebuah web. Pada versi HTML sebelumnya, untuk menambahkan audio di web maka kita harus menggunakan plug-in tambahan seperti Flash Player atau sejenisnya. Tapi di HTML5, kita tidak perlu menggunakan plug-in tambahan seperti itu.
     Untuk menambahkan audio menggunakan HTML5, kita cukup menghafalkan 2 tag saja yaitu <audio> dan <source>. Tag ini bisa dijalankan di Internet Explorer 9 keatas, Mozilla Firefox, Opera, Google Chrome, Safari, dan browser lainnya yang mendukung HTML5. 
     Oke, langsung saja ke pokok pembahasan. Bentuk paling sederhana-nya seperti ini:

Penjelasan:

     Coba perhatikan pada tag audio, kita sengaja menambahkan atribut controls. Fungsinya adalah untuk menampilkan audio control seperti play, pause, memperbesar volume dan mengecilkan volume suara.
     Teks yang ada diantara <audio> dan </audio> akan muncul jika browser yang dipakai tidak mendukung tag audio.
     Tag <source> digunakan untuk memanggil file audio yang akan kita jalankan. Tag <source> ini memiliki 2 atribut yaitu src="" yang bisa diisi dengan url file audio kita, dan atribut type="" bisa diisi dengan tipe audio kita. Fitur <audio> ini mendukung 3 format file audio yaitu: mp3, wav, dan ogg. Untuk nilai dari atribut type=""-nya kita bisa menyesuaikan dengan melihat tabel dibawah:

Format File Nilai untuk atribut type
MP3 audio/mpeg
Wav audio/wav
Ogg audio/ogg
Sekedar buat contoh, disini saya punya sebuah folder yang isinya seperti ini:
Screenshot Folder
Dan kode HTML dari audio.html seperti ini:
Jika file audio.html tadi dibuka di Firefox/ browser yang sudah mendukung HTML5, maka hasilnya adalah seperti ini:
Screenshot jika dibuka di Firefox
Tapi jika dibuka di browser yang belum mendukung HTML5 (disini saya buka pake Internet Explorer 8), maka hasilnya seperti ini:
Screenshot jika dibuka browser yang tidak mendukung HTML5

Atribut yang dimiliki <audio>

Untuk memaksimalkan fungsinya, tag <audio> ini juga memiliki beberapa atribut yang bisa kita pakai yaitu:
  • controls
  • Digunakan untuk menampilkan audio control seperti yang sudah dipakai diatas. Untuk memastikannya, silahkan anda coba praktekan script HTML diatas kemudian coba hapus atribut controls -nya.
  • autoplay
  • Digunakan jika kita ingin audio yang kita buat bisa memutar secara otomatis tanpa meng-klik tombol play.
  • loop
  • Jika kita menggunakan atribut ini, ketika audio/musik telah selesai diputar maka audio akan memulai kembali dari awal secara otomatis.
Walaupun masih ada beberapa atribut lagi, tapi menurut saya ke-3 atribut ini lah yang paling penting untuk diketahui.
Biar lebih faham lagi, coba praktekan semua tutorial ini dan cari lagi referensi lainnya di Internet.
Sekian dari saya.
Kurang dan lebihnya mohon dimaafkan.
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

5 komentar

Request cara menampilkan video dengan HTML5 nya gan ;)

Siap gan, ini draft-nya udah jadi. Tinggal dipublish :)

bikin tutorial cara pake html5 ini gan,, ane belom paham


EmoticonEmoticon