Podcast, wawancara radio, sampai rekaman narasi resep — semua konten bersuara bisa hadir langsung di dalam halaman. HTML menyediakan satu elemen untuk itu: audio. Browser modern memutarnya tanpa plugin tambahan, lengkap dengan pemutar, dekoder, dan antarmuka bawaan.

Chapter ini membahas cara menyematkan berkas suara dengan atribut src, alasan pemutar tanpa controls tidak terlihat di layar, serta teks fallback untuk browser generasi lama yang tidak mengenal elemen ini.

Aturan Dasar audio #

Elemen audio menyematkan satu berkas suara ke dalam dokumen. Sumber suara diberikan lewat atribut src yang berisi URL berkas — biasa MP3. Elemen ini bukan void element, jadi tag penutup </audio> tetap ditulis. Antarmuka pemutar baru muncul bila kita mencantumkan atribut controls.

Mekanisme di balik layarnya mengejutkan banyak pemula: tanpa controls, elemen audio tetap termuat dan tetap bisa memutar suara, tetapi browser tidak menampilkan satu pun tombol di layar. Pola ini bukan galat — justru dipakai ketika JavaScript yang mengendalikan pemutaran. Contoh paling umumnya adalah efek suara: skrip membuat objek Audio di memori, lalu memutar bunyi saat pengunjung menekan tombol.

Contoh berikut menyematkan episode 12 podcast Kopi Pagi:

html 
<audio controls src="audio/kopi-pagi-episode-12.mp3"></audio>

Hasil Render:

Pada demo, berkas podcast diganti rekaman contoh daring (CC0, dari MDN) agar bisa langsung diputar — demo ini membutuhkan koneksi internet.

Mari kita telaah kode di atas:

  1. Baris 1 (<audio ...>): elemen pemutar suara; atribut src menunjuk berkas MP3 episode.
  2. Atribut controls: memerintahkan browser menampilkan antarmuka bawaan. Hapus atribut ini dan seluruh bilah pemutar menghilang dari layar.
  3. Tag penutup (</audio>): wajib ada; audio bukan void element seperti img.

Fallback untuk Browser Lama #

Browser modern seluruhnya mendukung audio. Browser generasi lama mengabaikan tag yang tidak dikenalnya — dan di situlah fallback bekerja. Teks yang kita taruh di antara tag pembuka dan penutup hanya ditampilkan ketika browser tidak mengenal elemen pemutarnya:

html 
<audio controls>
  <source src="audio/kopi-pagi-episode-12.mp3" type="audio/mpeg">
  Browser ini tidak mendukung pemutar audio HTML.
</audio>

Browser modern memilih source di dalam elemen dan tidak pernah menampilkan teks fallback. Browser lama melewati tag audio serta source yang tidak dikenalnya, lalu merender sisanya sebagai teks biasa — lengkap dengan tautan unduhan bila kita menambahkannya. Pola source sebagai anak elemen ini dibahas tuntas di chapter Elemen source.

Ringkasan #

  • audio menyematkan berkas suara; sumbernya lewat atribut src atau anak source.
  • Tanpa controls, elemen tetap termuat tetapi tidak menampilkan antarmuka — kendali pindah ke JavaScript.
  • Teks di dalam elemen menjadi fallback untuk browser lama yang tidak mengenal audio.
  • Posisi elemen menentukan posisi pemutar; konteks pemasangan berbeda untuk podcast, musik latar, dan efek suara.

Chapter berikutnya menaikkan taruhannya: gambar bergerak beserta suaranya, dalam elemen video.