<audio>

The <audio> tag allows you to embed audio files into a web page. It also provides controls for playing, pausing, adjusting volume, and supports multiple sources for maximum compatibility with browsers.

It is often used in combination with the <source> tag, enabling you to provide multiple formats of audio files. Browsers can then choose one of the proposed formats to ensure optimal compatibility. 😉

Structure and Syntax of the <audio> Tag

Structure

As we've seen, the <audio> tag is often combined with the <source> tag. Here's the typical structure when you want to embed an audio track into an HTML page:

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

In this example, we have two audio files:

• audio-file.mp3 - The audio file in mp3 format;
• audio-file.ogg - The audio file in ogg format.

Browsers can choose which version to play. Finally, note that the controls attribute on the <audio> tag enables displaying buttons that control the audio track: play, pause, volume, etc.

The text "Your browser does not support the audio element" will only appear if the browser cannot play any of the provided files.

Usage Examples

Automatically Play an Audio Track

It is possible to automatically play an audio track using the autoplay attribute on the <audio> tag.

<audio autoplay>
  <source src="background-music.mp3" type="audio/mpeg">
  Your browser does not support this audio.
</audio>

Loop an Audio Track

To loop an audio track without interruption, use the loop attribute.

<audio loop>
  <source src="background-music.mp3" type="audio/mpeg">
  Your browser does not support this audio.
</audio>

Combining Attributes

You can combine attributes to create an audio track that:

1. Can be controlled;
2. Plays automatically;
3. Loops continuously.

<audio controls autoplay loop>
  <source src="background-music.mp3" type="audio/mpeg">
  Your browser does not support this audio.
</audio>

Usage Without <source>

While possible, it is not recommended to use only the src attribute directly within the <audio> tag, as it limits compatibility:

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

Attributes

Specific Attributes

Common Attributes

The <audio> tag also accepts global attributes such as id, class, style, etc.

Recommendations

Here are some key considerations when using the <audio> tag:

Use Multiple <source> Tags

Always provide multiple formats (e.g., MP3, OGG, etc.) with <source> tags to ensure playback on all browsers. While repetitive and time-consuming, this practice improves search engine ranking and increases user reach.

Consider Accessibility

Provide an alternative text for cases of incompatibility, as shown in this example:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support this audio. Download it here: <a href="audio.mp3">audio.mp3</a>.
</audio>

Customize Controls

With JavaScript and CSS, you can easily customize the audio player controls. Don't just rely on the controls attribute—create a unique user experience (e.g., like Spotify).

Optimize Performance

By default, all audio tracks on a page are loaded as soon as the page opens. To enhance performance, use the preload="none" attribute for tracks that are not immediately needed.

Browser Compatibility

The <audio> element is compatible with all browsers.