Audio: Memutar Suara

Analogi: Radio Tape dan Kaset Berbagai Merek

Bayangkan radio tape jadul. Agar bisa bunyi, ia butuh dua hal: tombol-tombol play, pause, dan volume di badannya, serta kaset yang formatnya cocok dengan pemutarnya. Kaset yang tidak cocok ya tidak bisa diputar, sesederhana itu.

Tag <audio> adalah radio tape-nya web. Atribut controls adalah tombol-tombol di badan radio: tanpanya, audio tetap "ada" di halaman tapi tidak ada cara bagi pengunjung untuk memutarnya. Elemen <source> adalah koleksi kaset berbagai merek: kamu sediakan beberapa format file, dan browser memilih satu yang ia kenali. Teks di dalam tag adalah pesan darurat untuk radio yang super jadul, yaitu browser yang bahkan tidak kenal tag audio sama sekali.

Kenapa Konsep Ini Ada

Dulu, memutar suara di web adalah mimpi buruk. Developer harus memasang plugin Flash, pengunjung harus menginstal plugin itu juga, dan di HP sering kali tidak bisa sama sekali. HTML5 memperkenalkan <audio> sebagai pemutar bawaan browser: tidak butuh plugin, tidak butuh JavaScript, cukup satu tag dan browser mengurus sisanya. Inilah yang membuat podcast, kursus online, dan portofolio musisi bisa hidup langsung di halaman web.

Tapi ada masalah kedua: tidak semua browser setuju soal format audio. Safari lebih suka MP3/AAC, Firefox dan Chrome juga menerima Ogg. Tidak ada satu format yang didukung semua browser di semua zaman. Solusinya adalah pola <source> berlapis: kamu daftarkan beberapa format dari atas ke bawah, browser mencoba satu per satu dari yang pertama, dan memakai yang pertama berhasil ia putar. Masalah ketiga adalah kuota: halaman dengan sepuluh file audio tidak boleh mengunduh semuanya sekaligus saat dibuka. Atribut preload memecahkan ini dengan mengatur seberapa agresif browser boleh mengunduh sebelum pengguna menekan play.

Contoh 1: Pemutar Audio Paling Sederhana

<h2>Episode 1: Kenalan dengan Warkop</h2>
<audio controls src="episode-1.mp3">
  Browser kamu tidak mendukung audio.
</audio>

Atribut controls wajib ada, tanpanya tidak ada tombol play yang tampil dan pengunjung tidak bisa memutar apa pun. Teks "Browser kamu tidak mendukung audio" hanya tampil di browser yang sangat lawas yang tidak mengenal tag <audio>; di browser modern ia tidak pernah terlihat, tapi tetap wajib ditulis sebagai fallback yang sopan.

Contoh 2: Podcast dengan Beberapa Format dan Penghemat Kuota

Contoh yang lebih realistis untuk halaman podcast dengan banyak episode:

<h2>Episode 2: Rahasia Kopi Tubruk</h2>
<audio controls preload="none">
  <source src="episode-2.mp3" type="audio/mpeg" />
  <source src="episode-2.ogg" type="audio/ogg" />
  Maaf, browser kamu tidak bisa memutar audio.
</audio>
<p>Durasi: 12 menit</p>

Di sini ada tiga peningkatan. Pertama, dua <source> memberi browser pilihan: kalau ia bisa memutar MP3 ia pakai yang pertama, kalau tidak ia coba Ogg. Atribut type penting karena memberi tahu browser format file tanpa harus mengunduh isinya dulu untuk mengecek. Kedua, preload="none" memerintahkan browser untuk tidak mengunduh apa pun sampai pengguna menekan play. Di halaman dengan sepuluh episode, ini menghemat kuota pengunjung secara drastis. Ketiga, teks pendamping seperti durasi membantu pengunjung memutuskan sebelum menekan play.

Kesalahan Umum Pemula

1. Lupa menulis controls lalu heran kenapa tidak ada pemutar yang tampil.

Salah:

<audio src="musik.mp3"></audio>

Benar:

<audio controls src="musik.mp3">
  Browser kamu tidak mendukung audio.
</audio>

Tanpa controls, elemen audio menjadi tidak terlihat dan tidak bisa dioperasikan, kecuali kamu berniat mengendalikannya lewat JavaScript (itu materi tingkat lanjut). Untuk pemula, controls hampir selalu wajib.

2. Hanya menyediakan satu format file.

Salah:

<audio controls>
  <source src="lagu.ogg" type="audio/ogg" />
</audio>

Benar:

<audio controls>
  <source src="lagu.mp3" type="audio/mpeg" />
  <source src="lagu.ogg" type="audio/ogg" />
  Maaf, browser kamu tidak bisa memutar audio.
</audio>

Satu format berarti mempertaruhkan seluruh pemutar pada satu browser yang tidak mendukungnya. MP3 adalah pilihan pertama yang paling aman karena didukung hampir semua browser modern, Ogg sebagai cadangan. Urutannya penting: browser memakai source pertama yang ia kenali.

3. Memasang autoplay dan berharap musik langsung bunyi saat halaman dibuka.

Salah (di hampir semua browser modern, ini diblokir):

<audio autoplay src="musik.mp3"></audio>

Benar: jangan mengandalkan autoplay untuk pengalaman penting. Browser modern memblokir audio yang berbunyi otomatis karena dianggap mengganggu, kecuali dimulai dalam keadaan bisu (muted). Biarkan pengguna menekan play sendiri. Itu bukan bug di kodemu, itu kebijakan browser yang disepakati demi kenyamanan pengguna.

Catatan teknis: Atribut loop membuat audio berputar berulang, berguna untuk backsound game sederhana, sedangkan muted memulai dalam keadaan bisu. Kombinasi autoplay muted memang diizinkan browser, tapi untuk audio musik itu tidak ada gunanya karena pengunjung tetap harus menyalakan suaranya manual.