<audio>

Since:		HTML5(2014)

The audio element embeds audio content in an HTML page, allowing browsers to play background music, sound effects, podcasts, and more.

Syntax

<!-- Basic audio embedding -->
<audio src="sound.mp3" controls></audio>

<!-- Multiple formats with fallback -->
<audio controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  <p>Your browser does not support audio playback.</p>
</audio>

Common Attributes

Attribute	Description
src	Specifies the URL of the audio file to play.
controls	Displays the browser's built-in playback controls, including play/pause, volume, and a seek bar.
autoplay	Starts playback automatically when the page loads. Many browsers restrict this behavior.
loop	Restarts playback from the beginning when the audio ends.
muted	Mutes the audio on playback.
preload	Specifies how the browser should preload the audio data (none / metadata / auto).

Sample Code

sample_audio.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>audio Sample</title>
</head>
<body style="margin: 20px;">

  <!-- Basic: audio with controls and multi-format fallback -->
  <p>BGM Player</p>
  <audio controls>
    <!-- Prefer OGG; fall back to MP3 if not supported -->
    <source src="bgm.ogg" type="audio/ogg">
    <source src="bgm.mp3" type="audio/mpeg">
    <p>Your browser does not support audio playback.</p>
  </audio>

  <!-- Looping audio with preload -->
  <p>Looping audio (preload metadata only)</p>
  <audio src="ambient.mp3" controls loop preload="metadata"></audio>

  <!-- Controlling playback with JavaScript -->
  <p>Custom controller</p>
  <audio id="myAudio" src="bgm.mp3" preload="none"></audio>
  <button onclick="document.getElementById('myAudio').play();">Play</button>
  <button onclick="document.getElementById('myAudio').pause();">Pause</button>

</body>
</html>

Result

An audio control panel appears on the page, allowing you to play, pause, adjust volume, and seek through the audio.

View sample page

Controlling Playback with JavaScript

The audio element exposes a rich set of properties and methods for JavaScript control, useful for building custom player UIs.

Property / Method	Description
play()	Starts playback. Returns a Promise.
pause()	Pauses playback.
currentTime	Gets or sets the current playback position in seconds. Assigning a value seeks to that position.
duration	Returns the total duration of the audio in seconds.
volume	Gets or sets the volume level from 0.0 to 1.0.
muted	Gets or sets the muted state (true/false).
paused	Returns true if playback is currently paused.
ended	Returns true if playback has reached the end.
playbackRate	Gets or sets the playback speed (1.0 = normal, 2.0 = double speed).

<audio id="player" src="bgm.mp3" preload="metadata"></audio>

<div>
  <button id="playBtn">Play</button>
  <button id="muteBtn">Mute</button>
  <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
  <span id="timeDisplay">0:00 / 0:00</span>
</div>

<script>
var audio = document.getElementById('player');
var playBtn = document.getElementById('playBtn');
var muteBtn = document.getElementById('muteBtn');
var volumeSlider = document.getElementById('volumeSlider');
var timeDisplay = document.getElementById('timeDisplay');

// Toggle play/pause
playBtn.addEventListener('click', function() {
  if (audio.paused) {
    audio.play();
    playBtn.textContent = 'Pause';
  } else {
    audio.pause();
    playBtn.textContent = 'Play';
  }
});

// Toggle mute
muteBtn.addEventListener('click', function() {
  audio.muted = !audio.muted;
  muteBtn.textContent = audio.muted ? 'Unmute' : 'Mute';
});

// Volume slider
volumeSlider.addEventListener('input', function() {
  audio.volume = this.value;
});

// Update time display
audio.addEventListener('timeupdate', function() {
  var cur = Math.floor(audio.currentTime);
  var dur = Math.floor(audio.duration) || 0;
  timeDisplay.textContent =
    Math.floor(cur / 60) + ':' + ('0' + (cur % 60)).slice(-2) + ' / ' +
    Math.floor(dur / 60) + ':' + ('0' + (dur % 60)).slice(-2);
});
</script>

Notes

The audio element was introduced in HTML5, enabling browsers to play audio without plugins such as Flash. MP3 (audio/mpeg) is now supported by virtually all browsers. OGG is an open format that can offer better quality than MP3 in some cases, but Safari's support for it is limited. To maximize compatibility, specify both formats using multiple source elements.

Even when autoplay is set, most browsers block audio autoplay without prior user interaction. Use autoplay sparingly to avoid a poor user experience. For use cases such as background music, it is recommended to include the controls attribute so users can start playback themselves.

To embed video content, use the video element instead.