<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.

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.