HTML Tags
HTML <audio> Tag
The
<audio>tag is used to embed sound content in an HTML document, such as music, podcasts, or sound effects.
It supports multiple audio formats and provides playback controls like play, pause, and volume.
Syntax
html
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Attributes
| Attribute | Description | Example |
|---|---|---|
| src | Specifies the path to the audio file. | src="song.mp3" |
| controls | Displays play, pause, and volume controls. | controls |
| autoplay | Automatically starts playing the audio. | autoplay |
| loop | Repeats the audio after it ends. | loop |
| muted | Starts the audio in a muted state. | muted |
| preload | Specifies how the audio should be loaded. Values: none, metadata, auto. | preload="auto" |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Tag Example</title>
</head>
<body>
<h2>Example: Embedding an Audio File</h2>
<audio controls preload="metadata">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The <audio> tag is fully supported by all major browsers.
Older browsers (IE8 and below) do not fully support HTML audio playback.
However, some IE version may support different audio formats such as MP3, OGG, or WAV.
Notes
- You can include multiple
<source>elements to ensure cross-browser compatibility. - If the browser doesn’t support the
<audio>tag, the fallback text inside will be displayed. - Avoid using
autoplaywithout user consent to prevent accessibility and UX issues.
Conclusion
The <audio> tag provides an easy and standardized way to integrate sound into web pages.
By combining multiple formats and attributes, you can create rich multimedia experiences with full browser compatibility.