HTML Tags
HTML5 <audio> Tag
The <audio> tag embeds sound content, such as music or podcasts, that visitors can play directly in the browser. It is a native HTML5 media element that needs no plugins.
The <audio> Tag
The <audio> element plays audio files natively in the browser. You can point it at a file with the src attribute or provide multiple <source> children so the browser can pick a format it supports. Add the controls attribute to show the built-in play, pause, and volume interface.
Content placed between the opening and closing tags acts as fallback text for browsers that cannot play audio.
Syntax
Example
<audio controls src="sound.mp3"></audio>Example
Example
<!DOCTYPE html>
<html>
<body>
<h1>Audio Player</h1>
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<p>Press play to hear the sound.</p>
</body>
</html>More Examples
Example
<!DOCTYPE html>
<html>
<body>
<p>This audio loops and is muted by default:</p>
<audio controls loop muted>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg" />
</audio>
</body>
</html>Attributes
| Attribute | Description |
|---|---|
| controls | Shows the browser's built-in playback controls. |
| src | URL of the audio file (or use <source> children). |
| autoplay | Starts playing automatically when the page loads. |
| loop | Restarts the audio when it reaches the end. |
| muted | Starts the audio muted. |
| preload | Hints how much to preload: none, metadata, or auto. |
⚠️
Most browsers block autoplay with sound. To autoplay, you usually also need the muted attribute. Always include controls or a custom UI so users stay in control.
Key Takeaways
- <audio> plays sound natively without plugins.
- Add controls to show the built-in player.
- Use <source> children to offer multiple formats.
- autoplay with sound is usually blocked; combine with muted.
- loop, muted, and preload fine-tune playback.