HTML <audio> Tag

The <audio> tag in HTML is used to embed sound content into a web page. It allows you to play audio files directly in the browser without relying on external plugins. You can provide playback controls for the user and specify multiple audio sources for different browser compatibility.

Syntax

<audio controls autoplay loop muted preload="metadata">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Attributes

Example

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

In this basic example, the controls attribute adds the default audio controls, allowing the user to interact with the sound. If the browser doesn’t support the <audio> element it displays the fallback message.

More Examples

Multiple Audio Sources for Browser Compatibility

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

This example shows how to provide multiple audio formats. The browser will try to load the first format it supports. If no compatible format is found, the fallback message is displayed.

Autoplay Audio with Fallback

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

This example uses the autoplay attribute to start playing the audio automatically as soon as it’s ready, with the fallback content displayed if the browser does not support the <audio> element. Note that autoplay can be restricted by user settings.

Looping Audio with Muted

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

This example shows the muted attribute which makes the audio muted when it starts. The loop attribute causes the audio to restart automatically at the end and continue in a loop.

Using preload attribute to control loading

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

In this example, we’ve set preload="metadata", which instructs the browser to only load the audio’s metadata (like duration) when the page loads. This is a good option if you want to avoid downloading the entire audio file right away, especially for larger files.

Adding Custom Controls with JavaScript

<audio id="myAudio" src="audio.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>
<button onclick="document.getElementById('myAudio').currentTime = 0">Restart</button>

This example demonstrates how to create custom controls by using JavaScript to handle audio playback. This way, you can fully customize the style of your player.

Browser Support

Notes and Tips

• Always use the <source> tag inside the <audio> tag to provide different audio formats. This ensures that your audio can be played in a wider variety of browsers.
• If you use the autoplay attribute, consider the user experience. Auto-playing audio can be disruptive to visitors, and most browsers now require some kind of user interaction to trigger playback of the audio.
• Use the preload attribute judiciously. auto may be suitable for short audio clips, but metadata or none can be beneficial for larger files or when bandwidth consumption is a concern.
• If you don’t include the controls attribute, the user won’t have any way to play the audio. Unless you are handling the controls through Javascript, make sure to include the controls attribute.
• Provide a fallback message inside the <audio> tags so that users with older browsers know what’s supposed to be there if their browser doesn’t support <audio> tag.
• When designing a custom control, be sure that the controls are accessible. Include keyboard controls to allow access for the keyboard users and screen readers