<audio>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>audio Sample</title>
</head>
<body>

  <p>BGM Player</p>

  <!-- Audio with playback controls -->
  <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>

  <p>Looping Audio Sample</p>

  <!-- Audio that loops continuously -->
  <audio src="ambient.mp3" controls loop></audio>

</body>
</html>

Result

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

┌──────────────────────────────────────┐
│  ▶  0:00 ──────────────────  🔊     │
└──────────────────────────────────────┘

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.