Runnable HTML Docs: Audio Tag

Q: How do I add audio to an HTML page?

Use . The controls attribute shows the browser's player with a play button, timeline and volume. Without it, the element is invisible.

Q: How do I loop audio in HTML?

Add the loop attribute: . When the file ends, it starts again from the beginning.

Q: How do I play a sound with JavaScript?

Create or select an audio element and call play(), for example new Audio('click.mp3').play() inside a click handler. play() returns a promise that rejects if the browser blocks playback.

How to add audio

Point the <audio> element at a sound file and add controls:

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

controls shows the browser's player: play and pause, a timeline, the time and a volume control. Without controls the element takes no space at all. The preview cannot load files from your computer, so this example builds a short WAV file in the browser with a script and uses it as the src. Press 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>

The player looks different in Chrome, Firefox and Safari, because each browser draws its own. Delete controls and the player disappears, though the audio is still there for JavaScript to play.

Audio attributes

Attribute	What it does
`controls`	Shows the browser's player
`autoplay`	Tries to start playing on load (blocked with sound, see below)
`loop`	Starts again when the file ends
`muted`	Starts with the volume off
`preload`	`none` (download nothing until play), `metadata` (length only) or `auto` (browser decides)
`src`	The file to play; or use `<source>` children for several formats

Use preload="none" or "metadata" for pages with many players, such as a podcast episode list, so the page does not download every file up front.

Formats and fallbacks

List several files with <source> and the browser plays the first one it supports. Text inside the element shows only in browsers without <audio> support:

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

Format	MIME type	Notes
MP3	`audio/mpeg`	Plays in every current browser; the safe single choice
AAC (`.m4a`)	`audio/mp4`	Widely supported, good quality at small sizes
Opus or Vorbis (`.ogg`, `.webm`)	`audio/ogg`, `audio/webm`	Small files; list MP3 as a fallback, because Safari support varies by version
WAV	`audio/wav`	Uncompressed and large; fine for short sound effects

Why autoplay fails

Browsers do not let a page start making sound on its own. autoplay, or calling play() before the user has clicked or tapped, is refused. This example tries to play on load and prints what happened, then offers a button:

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

You will usually see NotAllowedError, the error a browser gives when it blocks playback. The button works because a click counts as permission. Each browser has its own extra rules (Chrome, for example, remembers sites where you often play media), so never rely on autoplay: start sound from a user action, and always handle the promise that play() returns.

new Audio(url) creates an audio element in JavaScript without adding it to the page, which is handy for sound effects.

Build your own controls

Hide the built-in player by leaving out controls, then drive the element with its JavaScript API: play(), pause(), currentTime, duration, volume, and events such as timeupdate and 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>

The button is a real <button>, so it works with the keyboard, and its label changes between Play and Pause. At the end of the file the browser pauses the element and fires ended, so the button returns to Play by itself. If you build custom controls, you also take over what the built-in ones gave you for free: keyboard support, labels and a volume control.

Accessibility

Never start sound by itself. It interrupts screen readers and startles people. Start audio from a click.
Offer a transcript for podcasts and spoken audio. A link to a text version under the player is enough, and search engines can read it.
Keep controls, or build controls from real buttons, so the audio can be paused with the keyboard.

For video with sound, captions and posters, see the video tag page; <audio> shares most of its attributes and all of its JavaScript API.

Common mistakes

Forgetting controls. The element is invisible without it, and it looks like nothing happened.
Expecting autoplay to work. Start playback from a click and handle the promise from play().
A wrong file path or type. Open the file URL directly to check it, and match type to the real format (audio/mpeg for MP3).
Loading every file on a long list. Use preload="none" or "metadata".
Background music that cannot be stopped. Always give people a visible way to pause.

Frequently Asked Questions

How do I add audio to an HTML page?

Use <audio src="song.mp3" controls></audio>. The controls attribute shows the browser's player with a play button, timeline and volume. Without it, the element is invisible.

Why does my audio not autoplay?

Browsers block audio that starts with sound before the user has interacted with the page. Start playback from a click with audio.play() instead. A muted element may autoplay, but for audio that is rarely useful.

Which audio format should I use in HTML?

MP3 plays in every current browser, so it is the safe choice for a single file. AAC in an .m4a file is also widely supported. Use <source> elements to offer more than one format.

How do I loop audio in HTML?

Add the loop attribute: <audio src="rain.mp3" controls loop>. When the file ends, it starts again from the beginning.

How do I play a sound with JavaScript?

Create or select an audio element and call play(), for example new Audio('click.mp3').play() inside a click handler. play() returns a promise that rejects if the browser blocks playback.

Can I style the HTML audio player?

Only a little: you can set its width, margin and display, but the buttons inside are drawn by the browser and look different in each one. For a custom look, hide the controls and build your own with buttons and the audio JavaScript API.

Related concepts