Audio

Musik latar, rekaman podcast, dan panduan suara memperkaya halaman tanpa plugin apa pun: HTML menyediakan elemen audio untuk menyematkan suara. Elemen ini hadir dengan player bawaan browser, lengkap dengan tombol putar dan pengatur volume. Pada Chapter ini kita membaca atribut utama audio — controls, loop, muted, dan preload — mengenal format file MP3 dan OGG, menyiapkan teks fallback untuk browser lama, serta menawarkan beberapa sumber file dengan elemen source.

Elemen audio dan Atribut controls #

Elemen audio mengambil satu file suara melalui atribut src, sama polanya dengan img. Perbedaan pentingnya: tanpa atribut controls, audio tidak menampilkan antarmuka apa pun dan pengunjung tidak punya cara memutarnya. Atribut controls memerintahkan browser menampilkan player bawaan — tombol putar/jeda, garis waktu, dan pengatur volume.

<audio src="lagu.mp3" controls></audio>

Output yang Dihasilkan:

Browser menampilkan baris player berisi tombol putar, garis waktu,
dan pengatur volume; file lagu.mp3 siap diputar pengunjung.

Format MP3 dan OGG #

Dua nama muncul paling sering pada file audio untuk web:

File lagu.mp3 pada contoh chapter ini hipotetis: kita tidak menyertakan file musik dalam bundle. Siapkan file suara milik pembaca sendiri — rekaman pendek pun cukup untuk latihan — lalu sesuaikan nama file pada src. Rincian codec dan perbandingan dukungan tersaji pada panduan format media MDN yang tercantum di referensi.

loop, muted, dan preload #

Tiga atribut lain mengatur perilaku pemutaran:

• loop — memutar ulang file secara otomatis setiap kali selesai.
• muted — memulai pemutaran dalam keadaan tanpa suara; pengunjung menyalakannya lewat pengatur volume player.
• preload — petunjuk seberapa banyak file diunduh sebelum diputar.

Nilai preload dirinci sebagai berikut:

preload bersifat petunjuk: browser boleh mengabaikannya demi penghematan data. Untuk audio yang jarang diputar, none paling hemat kuota; untuk rekaman utama halaman, metadata menjaga player tetap informatif tanpa mengunduh seluruh file.

Teks Fallback di dalam Elemen #

Browser yang tidak mengenal elemen audio — sebagian kecil browser sangat lama — menampilkan konten apa pun yang ditulis di antara tag pembuka dan penutupnya. Browser modern mengabaikan konten tersebut. Karena itu, tulis kalimat pengganti berisi penjelasan atau link unduhan di dalam elemen; biaya penulisannya kecil, dan manfaatnya menutup celah bagi browser lama.

Beberapa Sumber dengan source #

Alih-alih src pada audio, kita dapat menumpuk beberapa elemen source dengan atribut type yang menuliskan format masing-masing. Browser memeriksa daftar dari atas dan memutari file pertama yang formatnya didukung. Susunan ini memadukan dua format sekaligus: MP3 untuk kompatibilitas luas, OGG untuk browser yang mendukungnya.

<audio controls>
  <source src="lagu.mp3" type="audio/mpeg">
  <source src="lagu.ogg" type="audio/ogg">
  Browser ini tidak mendukung pemutaran audio.
</audio>

Output yang Dihasilkan:

Browser menampilkan player dari file pertama yang formatnya didukung:
  - MP3 didukung   -> lagu.mp3 dimuat
  - MP3 gagal      -> lagu.ogg dimuat
  - Keduanya gagal -> teks pengganti di dalam elemen tampil

Contoh Lengkap dalam Satu File #

File berikut merangkum seluruh atribut dan pola di atas dalam satu halaman pemutar:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Elemen Audio</title>
</head>
<body>
  <h1>Pemutar lagu sederhana</h1>
  <p>Halaman pemutar lagu milik Budi.</p>
  <audio controls loop preload="metadata">
    <source src="lagu.mp3" type="audio/mpeg">
    <source src="lagu.ogg" type="audio/ogg">
    Browser ini tidak mendukung pemutaran audio. Unduh rekamannya
    <a href="lagu.mp3">di sini</a>.
  </audio>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Pemutar lagu sederhana"
  - Paragraf pengantar
  - Player audio dengan tombol putar; file dimuat mulai dari data
    durasi saja (preload="metadata")
  - Setelah selesai, pemutaran kembali dari awal (loop)

Mari kita telaah baris-baris penting pada file di atas:

1. Baris 11 (audio controls loop preload="metadata"): player tampil, pemutaran berulang otomatis, dan browser hanya mengunduh metadata di awal.
2. Baris 12 (source MP3): kandidat pertama; dipakai bila browser mendukung audio/mpeg.
3. Baris 13 (source OGG): kandidat cadangan bagi browser yang tidak memutar MP3.
4. Baris 14-15 (teks pengganti): hanya tampil pada browser yang tidak mengenal elemen audio; berisi link unduhan sehingga isi rekaman tetap terjangkau.
5. Tanpa muted: lagu diputar dengan suara penuh. Atribut muted paling sering dipakai bersama autoplay, dan kombinasi itu kita bahas pada chapter Video.

Suara telah tersaji dengan player sederhana. Langkah berikutnya menambahkan dimensi gerak: elemen video membawa gambar bergerak beserta gambar sampul dan aturan autoplay, dan itulah topik Chapter berikutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen audio
• MDN Web Docs — Elemen source
• MDN Web Docs — Media container formats
• WHATWG — HTML Living Standard: Media elements

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Elemen Audio</title>
</head>
<body>
  <h1>Pemutar lagu sederhana</h1>
  <p>Halaman pemutar lagu milik Budi.</p>
  <audio controls loop preload="metadata">
    <source src="lagu.mp3" type="audio/mpeg">
    <source src="lagu.ogg" type="audio/ogg">
    Browser ini tidak mendukung pemutaran audio. Unduh rekamannya
    <a href="lagu.mp3">di sini</a>.
  </audio>
</body>
</html>