HTML Audio Tag: Syntax, Usage, and Examples

The HTML audio tag allows you to embed and play audio files on a webpage. It provides built-in controls for play, pause, and volume adjustment, and supports various audio formats like MP3, WAV, and Ogg.

How to Use the HTML Audio Tag

To include an audio file in a webpage, use the <audio> element with the src attribute pointing to the audio file’s location. Alternatively, you can use multiple <source> elements for better compatibility across browsers.

Basic Syntax

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

• The controls attribute displays playback controls.
• The <source> elements allow the browser to choose the best-supported format.
• The fallback text appears if the browser does not support the audio tag in HTML.

When to Use the HTML Audio Tag

The audio HTML tag is useful when you need to add sound elements to your webpage. Here are some common use cases:

1. Background Music or Sound Effects

You can use the HTML audio tag autoplay attribute to play background music or sound effects automatically.

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

• The autoplay attribute starts playback when the page loads.
• The loop attribute ensures continuous playback.

2. Podcasts or Interviews

You can embed podcasts or recorded interviews using the audio tag in HTML.

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

3. Pronunciation Guides or Language Learning Apps

Websites offering language lessons often use audio HTML tags to play pronunciation examples.

<audio controls>
    <source src="word-pronunciation.mp3" type="audio/mpeg">
</audio>

Examples of the HTML Audio Tag

Example 1: HTML Audio Tag with Custom Controls

You can hide default controls and create your own buttons using JavaScript.

<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">Increase Volume</button>
<button onclick="document.getElementById('myAudio').volume -= 0.1">Decrease Volume</button>

Example 2: How to Customize the Audio Tag in HTML

To customize the audio tag in HTML, you can use CSS to style it.

<audio id="styledAudio" controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>

<style>
    audio {
        width: 300px;
        background-color: #f5f5f5;
        border-radius: 5px;
    }
</style>

Example 3: HTML Audio Tag Autoplay with Events

You can use HTML audio tag events to trigger actions when playback starts or ends.

<audio id="eventAudio" autoplay>
    <source src="notification.mp3" type="audio/mpeg">
</audio>

<script>
    document.getElementById("eventAudio").onended = function() {
        alert("Audio playback has finished.");
    };
</script>

Learn More About the HTML Audio Tag

1. HTML Audio Tag Attributes

The HTML audio tag attributes allow customization of the audio experience:

• controls – Shows built-in controls.
• autoplay – Starts playback automatically.
• loop – Repeats the audio file when it ends.
• muted – Mutes the audio by default.
• preload – Defines how the browser loads the audio (auto, metadata, none).

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

2. HTML Audio Tag Volume Control

You can adjust the HTML audio tag volume dynamically using JavaScript.

<audio id="volumeAudio" controls>
    <source src="track.mp3" type="audio/mpeg">
</audio>

<button onclick="document.getElementById('volumeAudio').volume = 0.5">Set Volume to 50%</button>

3. HTML Audio Tag Example with Multiple Formats

For better browser support, use multiple file formats.

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

The HTML audio tag is an essential tool for adding sound to webpages, whether for media playback, user interactions, or accessibility enhancements.