← Back to All Tags

<audio>

Defines embedded sound content

✨ HTML5

Definition and Usage

The <audio> tag is used to embed sound content in a document, such as music or other audio streams.

The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

Tip: There are three supported audio formats in HTML: MP3, WAV, and OGG.
Note: For video content, use the <video> tag instead.

Browser Support

The <audio> tag is supported in all major browsers:

Chrome
Chrome
4.0+
Firefox
Firefox
3.5+
Safari
Safari
4.0+
Edge
Edge
9.0+
Opera
Opera
10.5+

Attributes

Attribute Value Description
autoplay autoplay Specifies that the audio will start playing as soon as it is ready
controls controls Specifies that audio controls should be displayed (such as a play/pause button etc)
loop loop Specifies that the audio will start over again, every time it is finished
muted muted Specifies that the audio output should be muted
preload auto
metadata
none		 Specifies if and how the author thinks the audio should be loaded when the page loads
src URL Specifies the URL of the audio file

Audio Format Support

Format MIME Type Browser Support
MP3 audio/mpeg All modern browsers
WAV audio/wav All modern browsers
OGG audio/ogg Chrome, Firefox, Opera

Examples

Basic Audio Player

Simple audio player with controls:

Example

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Multiple Audio Sources

Provide multiple formats for better compatibility:

Example

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.wav" type="audio/wav">
  Your browser does not support the audio tag.
</audio>

Autoplay Audio

Audio that starts automatically (use carefully):

Example

<audio controls autoplay>
  <source src="background-music.mp3" type="audio/mpeg">
</audio>

Looping Audio

Create a continuous loop:

Example

<audio controls loop>
  <source src="ambient-sound.mp3" type="audio/mpeg">
</audio>

Muted Audio

Audio that starts muted:

Example

<audio controls muted>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Preload Settings

Control how audio is loaded:

Example

<!-- Preload the entire audio file -->
<audio controls preload="auto">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- Preload only metadata -->
<audio controls preload="metadata">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- Do not preload -->
<audio controls preload="none">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

JavaScript Control

Control audio playback with JavaScript:

Example

<audio id="myAudio">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<button onclick="document.getElementById('myAudio').play()">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>
<button onclick="document.getElementById('myAudio').volume += 0.1">Volume Up</button>
<button onclick="document.getElementById('myAudio').volume -= 0.1">Volume Down</button>

Custom Audio Player with Events

Create a custom player with event listeners:

Example

<audio id="player" src="audio.mp3"></audio>
<button id="playBtn">Play</button>
<span id="status">Ready</span>

<script>
  const audio = document.getElementById('player');
  const playBtn = document.getElementById('playBtn');
  const status = document.getElementById('status');

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

  audio.addEventListener('playing', () => {
    status.textContent = 'Playing...';
  });

  audio.addEventListener('pause', () => {
    status.textContent = 'Paused';
  });

  audio.addEventListener('ended', () => {
    status.textContent = 'Finished';
    playBtn.textContent = 'Play';
  });
</script>

Try it Yourself

Interactive Example

Audio player with controls:

🎵 Sample Audio Player

[Audio Player Controls Would Appear Here]

Note: Actual audio requires audio file source

Best Practices

  • Always include the controls attribute to give users control over playback
  • Provide multiple audio formats for better browser compatibility
  • Use preload="none" for large files to save bandwidth
  • Avoid autoplay as it can be annoying to users (many browsers block it)
  • Always include fallback text for unsupported browsers
  • Consider accessibility - provide transcripts or captions when appropriate
  • Use appropriate audio quality and compression to balance quality and file size
  • MP3 format has the best compatibility across all browsers

JavaScript Audio API

Common JavaScript methods and properties for audio control:

  • play() - Start playing the audio
  • pause() - Pause the audio playback
  • load() - Reload the audio element
  • currentTime - Get or set current playback position (in seconds)
  • duration - Get the length of the audio (in seconds)
  • volume - Get or set volume (0.0 to 1.0)
  • muted - Get or set mute status
  • paused - Check if audio is paused
  • ended - Check if audio has finished

Related Tags

  • <video>

    Defines embedded video

  • <source>

    Defines multiple media resources

  • <track>

    Defines text tracks for media