Thẻ audio HTML: chèn âm thanh, controls, autoplay và loop

Cách chèn âm thanh

Trỏ phần tử <audio> tới một tệp âm thanh và thêm controls:

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

controls hiển thị trình phát của trình duyệt: phát và tạm dừng, thanh thời gian, thời lượng và nút chỉnh âm lượng. Không có controls, phần tử không chiếm chỗ nào cả. Khung xem trước không tải được tệp từ máy tính của bạn, nên ví dụ này dùng một script tạo một tệp WAV ngắn ngay trong trình duyệt và dùng nó làm src. Nhấn phát thử:

<!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>

Trình phát trông khác nhau trên Chrome, Firefox và Safari, vì mỗi trình duyệt tự vẽ trình phát của mình. Xóa controls thì trình phát biến mất, nhưng âm thanh vẫn còn đó để JavaScript phát.

Thuộc tính của audio

Dùng preload="none" hoặc "metadata" cho trang có nhiều trình phát, như danh sách tập podcast, để trang không tải trước mọi tệp.

Định dạng và phương án dự phòng

Liệt kê nhiều tệp bằng <source> và trình duyệt sẽ phát tệp đầu tiên mà nó hỗ trợ. Chữ bên trong phần tử chỉ hiện trên trình duyệt không hỗ trợ <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>

Vì sao autoplay không chạy

Trình duyệt không cho trang tự phát ra tiếng. autoplay, hoặc gọi play() trước khi người dùng nhấp hay chạm, đều bị từ chối. Ví dụ này thử phát ngay khi tải trang và in ra kết quả, rồi đưa ra một nút bấm:

<!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>

Thường bạn sẽ thấy NotAllowedError, lỗi mà trình duyệt trả về khi chặn việc phát. Nút bấm thì chạy được vì một cú nhấp được tính là sự cho phép. Mỗi trình duyệt còn có quy tắc riêng (ví dụ Chrome ghi nhớ những trang bạn hay phát media), nên đừng bao giờ dựa vào autoplay: hãy phát âm thanh từ một thao tác của người dùng, và luôn xử lý promise mà play() trả về.

new Audio(url) tạo một phần tử audio trong JavaScript mà không thêm nó vào trang, rất tiện cho hiệu ứng âm thanh.

Tự làm nút điều khiển

Ẩn trình phát có sẵn bằng cách bỏ controls, rồi điều khiển phần tử qua API JavaScript của nó: play(), pause(), currentTime, duration, volume, và các sự kiện như timeupdate và 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>

Nút này là một <button> thật, nên dùng được bằng bàn phím, và nhãn của nó đổi qua lại giữa Play và Pause. Khi tệp phát hết, trình duyệt tạm dừng phần tử và phát sự kiện ended, nên nút tự trở về Play. Nếu tự làm nút điều khiển, bạn cũng phải tự lo những gì nút có sẵn cho không: hỗ trợ bàn phím, nhãn và nút chỉnh âm lượng.

Khả năng tiếp cận

• Đừng bao giờ tự phát âm thanh. Nó cắt ngang trình đọc màn hình và làm người dùng giật mình. Hãy phát âm thanh từ một cú nhấp.
• Cung cấp bản ghi lời cho podcast và âm thanh có lời nói. Một link tới bản văn bản dưới trình phát là đủ, và công cụ tìm kiếm cũng đọc được nó.
• Giữ controls, hoặc làm nút điều khiển bằng nút thật, để có thể tạm dừng âm thanh bằng bàn phím.

Với video có tiếng, phụ đề và ảnh bìa, xem trang thẻ video; <audio> dùng chung hầu hết thuộc tính và toàn bộ API JavaScript với nó.

Lỗi thường gặp

• Quên controls. Không có nó phần tử sẽ vô hình, trông như chẳng có gì xảy ra.
• Mong autoplay hoạt động. Hãy bắt đầu phát từ một cú nhấp và xử lý promise của play().
• Sai đường dẫn hoặc kiểu tệp. Mở trực tiếp URL của tệp để kiểm tra, và đặt type khớp với định dạng thật (audio/mpeg cho MP3).
• Tải mọi tệp trong một danh sách dài. Dùng preload="none" hoặc "metadata".
• Nhạc nền không tắt được. Luôn cho người dùng một cách nhìn thấy được để tạm dừng.