What Is the <audio> Tag?

The <audio> tag in HTML is used to embed sound content into a web page. It allows you to play audio files such as music, podcasts, or sound effects directly in the browser. The <audio> tag can include various attributes to control playback behavior, such as displaying playback controls, autoplaying the audio, or looping it continuously.

Syntax of the <audio> Tag

The basic syntax for the <audio> tag is as follows:

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

• <audio>: The audio tag used to embed sound.
• src="audiofile.mp3": The src attribute specifies the path to the audio file you want to play. The src attribute is mandatory.
• controls: This attribute adds playback controls (like play, pause, and volume) to the audio player. The controls attribute is optional.
• </audio>: The closing tag for the audio element.

Examples of the <audio> Tag

Let's explore some practical examples of using the <audio> tag to embed audio into your web pages.

1. Basic Audio Embed with Controls

In this example, we'll embed an audio file and display playback controls, allowing users to play, pause, and adjust the volume of the audio.

Example: Embedding a Music Track with Controls

Explanation:

• The <audio> tag embeds the audio file located at https://samplelib.com/lib/preview/mp3/sample-3s.mp3.
• The controls attribute adds playback controls below the audio player, enabling users to interact with the audio (play, pause, volume).

2. Audio Embed with Looping

In this example, we'll embed an audio file that automatically loops, playing continuously without stopping.

Example: Embedding a Background Music Track that Loops

Explanation:

• The controls attribute adds playback controls for user interaction.
• The loop attribute ensures that the audio track restarts automatically after it finishes playing, creating a continuous playback loop.

3. Audio Embed with Autoplay

If you'd like to see an additional example, here's how to embed an audio file that starts playing automatically when the page loads.

Example: Embedding an Audio Track that Autoplays

Explanation:

• The controls attribute adds playback controls for user interaction.
• The autoplay attribute makes the audio start playing automatically as soon as the page loads.

Note: Using autoplay can sometimes be intrusive to users, especially if unexpected audio starts playing. Use it judiciously to enhance user experience without causing annoyance.

Understanding how to use the <audio> tag effectively allows you to incorporate sound into your websites, making them more interactive and engaging. In the next lesson, we'll explore the <img> tag in more detail by focusing on the alt attribute and its importance.