HTML5 Audio
HTML
What is the <audio> Tag?
The <audio> element lets you embed sound content (like music or sound effects) directly into your web page, without needing plugins like Flash.
It works similarly to the <video> tag, but is used for audio only.
Basic Example
<audio src="song.mp3" controls>
Your browser does not support the audio element.
</audio>This creates an audio player with play/pause, volume, and progress controls:
Important Attributes
| Attribute | Description |
|---|---|
src | Path to the audio file. |
controls | Displays the built-in audio controls. |
autoplay | Starts playing automatically when the page loads. |
loop | Repeats the audio once it ends. |
muted | Loads the audio muted by default. |
Using Multiple Sources
You can provide multiple formats for better browser compatibility:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Why use multiple <source>?
Different browsers support different audio formats. This ensures your audio works across all major browsers.
| Format | File Extension | Browser Support |
|---|---|---|
| MP3 | .mp3 | Almost all modern browsers |
| Ogg | .ogg | Good open format; works in Firefox & Chrome |
| WAV | .wav | Large file size but widely supported |
Example with autoplay, loop, and muted
<audio controls autoplay loop muted>
<source src="background.mp3" type="audio/mpeg">
<source src="background.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>- Starts automatically
- Loops forever
- Plays muted by default