Audio HTML: Tag audio, Controls, Autoplay dan Loop

Cara menambahkan audio

Arahkan elemen <audio> ke sebuah file suara dan tambahkan controls:

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

controls menampilkan pemutar browser: play dan pause, timeline, waktu, dan pengatur volume. Tanpa controls, elemen ini sama sekali tidak memakan tempat. Pratinjau tidak bisa memuat file dari komputermu, jadi contoh ini membuat file WAV pendek di browser dengan sebuah script dan memakainya sebagai src. Tekan play:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Audio</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <audio id="player" controls></audio>
  <p>Four notes, 1.8 seconds.</p>
  <script>
    // Builds a tiny WAV file in the browser (stand-in for song.mp3)
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    document.getElementById('player').src = makeWav([[523, 0.4], [659, 0.4], [784, 0.4], [1047, 0.6]]);
  </script>
</body>
</html>

Pemutarnya terlihat berbeda di Chrome, Firefox dan Safari, karena setiap browser menggambar pemutarnya sendiri. Hapus controls dan pemutarnya hilang, walaupun audionya masih ada dan bisa diputar oleh JavaScript.

Atribut audio

Pakai preload="none" atau "metadata" di halaman dengan banyak pemutar, seperti daftar episode podcast, supaya halaman tidak langsung mengunduh semua file.

Format dan fallback

Daftarkan beberapa file dengan <source> dan browser akan memutar file pertama yang didukungnya. Teks di dalam elemen hanya muncul di browser yang tidak mendukung <audio>:

<audio controls preload="metadata">
  <source src="episode.opus" type="audio/ogg; codecs=opus">
  <source src="episode.mp3" type="audio/mpeg">
  <p>Your browser cannot play audio. <a href="episode.mp3">Download the episode</a>.</p>
</audio>

Kenapa autoplay gagal

Browser tidak mengizinkan halaman mulai bersuara dengan sendirinya. autoplay, atau memanggil play() sebelum pengguna mengklik atau mengetuk, akan ditolak. Contoh ini mencoba memutar saat halaman dimuat dan menampilkan apa yang terjadi, lalu menyediakan sebuah tombol:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 14px; }
  </style>
</head>
<body>
  <p id="result">Trying to play...</p>
  <button id="play">Play with a click</button>
  <script>
    // Builds a short beep as a WAV file (stand-in for a real sound file)
    function beep(freq, secs) {
      const rate = 8000, n = secs * rate;
      const view = new DataView(new ArrayBuffer(44 + n * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + n * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, n * 2, true);
      for (let i = 0; i < n; i++) view.setInt16(44 + i * 2, Math.sin(2 * Math.PI * freq * i / rate) * 12000, true);
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const sound = new Audio(beep(440, 0.5));
    const result = document.getElementById('result');
    sound.play()
      .then(() => { result.textContent = 'Autoplay worked this time.'; })
      .catch((err) => { result.textContent = 'Autoplay was blocked: ' + err.name; });
    document.getElementById('play').onclick = () => {
      sound.currentTime = 0;
      sound.play()
        .then(() => { result.textContent = 'Playing, because you clicked.'; })
        .catch((err) => { result.textContent = 'Still blocked: ' + err.name; });
    };
  </script>
</body>
</html>

Biasanya kamu akan melihat NotAllowedError, error yang diberikan browser saat memblokir pemutaran. Tombolnya berhasil karena klik dihitung sebagai izin. Setiap browser punya aturan tambahannya sendiri (Chrome, misalnya, mengingat situs tempat kamu sering memutar media), jadi jangan pernah mengandalkan autoplay: mulai suara dari tindakan pengguna, dan selalu tangani promise yang dikembalikan play().

new Audio(url) membuat elemen audio di JavaScript tanpa menambahkannya ke halaman, yang praktis untuk efek suara.

Membuat kontrol sendiri

Sembunyikan pemutar bawaan dengan tidak menulis controls, lalu kendalikan elemennya dengan API JavaScript-nya: play(), pause(), currentTime, duration, volume, dan event seperti timeupdate dan ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom player</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .player { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 10px; border: 2px solid #e5e7eb; border-radius: 10px; }
    .player button { font: inherit; width: 72px; padding: 6px 0; border: 0; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
    progress { flex: 1; }
    #time { font-variant-numeric: tabular-nums; font-size: 14px; color: #374151; }
  </style>
</head>
<body>
  <div class="player">
    <button id="toggle" aria-label="Play">Play</button>
    <progress id="bar" value="0" max="1"></progress>
    <span id="time">0.0 s</span>
  </div>
  <audio id="audio"></audio>
  <script>
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const audio = document.getElementById('audio');
    const toggle = document.getElementById('toggle');
    audio.src = makeWav([[392, 0.5], [440, 0.5], [494, 0.5], [523, 1]]);
    toggle.onclick = () => {
      if (audio.paused) audio.play().catch((err) => { toggle.textContent = err.name; });
      else audio.pause();
    };
    audio.addEventListener('play', () => { toggle.textContent = 'Pause'; toggle.setAttribute('aria-label', 'Pause'); });
    audio.addEventListener('pause', () => { toggle.textContent = 'Play'; toggle.setAttribute('aria-label', 'Play'); });
    audio.addEventListener('timeupdate', () => {
      document.getElementById('bar').value = audio.currentTime / audio.duration || 0;
      document.getElementById('time').textContent = audio.currentTime.toFixed(1) + ' s';
    });
  </script>
</body>
</html>

Tombolnya adalah <button> sungguhan, jadi bisa dipakai dengan keyboard, dan labelnya berganti antara Play dan Pause. Di akhir file, browser menghentikan elemen dan memicu ended, jadi tombol kembali ke Play dengan sendirinya. Kalau kamu membuat kontrol sendiri, kamu juga mengambil alih hal yang dulu diberikan kontrol bawaan secara gratis: dukungan keyboard, label, dan pengatur volume.

Aksesibilitas

• Jangan pernah memulai suara dengan sendirinya. Suara seperti itu mengganggu screen reader dan mengagetkan orang. Mulai audio dari sebuah klik.
• Sediakan transkrip untuk podcast dan audio berisi ucapan. Link ke versi teks di bawah pemutar sudah cukup, dan mesin pencari bisa membacanya.
• Pertahankan controls, atau buat kontrol dari tombol sungguhan, supaya audio bisa di-pause dengan keyboard.

Untuk video dengan suara, teks terjemahan, dan poster, lihat halaman tag video; <audio> memakai sebagian besar atribut yang sama dan seluruh API JavaScript-nya.

Kesalahan umum

• Lupa menulis controls. Elemennya tidak terlihat tanpa atribut itu, dan seolah tidak terjadi apa-apa.
• Berharap autoplay berhasil. Mulai pemutaran dari sebuah klik dan tangani promise dari play().
• Path atau tipe file yang salah. Buka URL file secara langsung untuk memeriksanya, dan cocokkan type dengan format aslinya (audio/mpeg untuk MP3).
• Memuat semua file di daftar yang panjang. Pakai preload="none" atau "metadata".
• Musik latar yang tidak bisa dihentikan. Selalu beri orang cara yang terlihat untuk menghentikannya.