The <audio> tag creates an audio player on a web page.
It supports media controls, like play, pause, volume, and mute.
An <audio> player with controls: play, pause, volume, etc.
<audio controls>
<source src="/media/epic.mp3" type="audio/mpeg">
</audio>
Note: By default, the <audio> player has no visual representation and is invisible.
Adding the controls attribute makes it appear (i.e. visible).
The <audio> tag references one or more audio files with a src attribute or the <source> element.
The browser will choose the first file with a file format that it supports.
Supported audio file formats include MP3, WAV, and OGG.
An <audio> tag that specifies two audio files.
The browser uses the first file type that it supports.
<audio controls>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
Your browser does not support audio element.
</audio>
<audio> - defines an audio elementNote: For multiple sources, the first supported file type will play.
This table lists the <audio> tag attributes.
| Attribute | Accepted Values | Description |
|---|---|---|
| controls | no value | Enables audio controls such as play/pause, volume, and others. |
| src | URL | Audio file URL / path. |
| id | identifier | Defines a unique identifier for the audio. |
| class | classnames | Sets one or more CSS classes to be applied to the audio. |
| style | CSS-styles | Sets the style for the audio. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the audio is hidden. |
| title | value | Sets a title that displays as a tooltip. |
| autoplay | no value | Tells the browser that the audio will start playing immediately |
| loop | no value | Specifies that audio is repeated every time it completes |
| muted | no value | Tells the browser that the audio must be muted (silenced). |
| preload |
auto metadata none |
Specifies how the audio file is loaded once page has been loaded |
| crossorigin |
anonymous use-credentials |
Specifies how crossorigin requests are handled. |
For additional global attributes see our global attributes list.
This table lists the audio formats each browser supports.
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
 IE/Edge
|
Yes | No | No |
 Chrome
|
Yes | Yes | Yes |
 Firefox
|
Yes | Yes | Yes |
 Safari
|
Yes | Yes | No |
 Opera
|
Yes | Yes | Yes |
These are the media types for each audio file format.
| Format | Media-type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
An <audio> tag with a loop attribute.
The audio file will play repeatedly.
<audio controls loop>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
</audio>
An <audio> tag with a muted attribute.
This attribute mutes (silences) the audio. It plays but without sound.
<audio controls muted>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
</audio>
The <audio> element exposes a DOM (Document Object Model).
This gives JavaScript programmatic control over the audio.
Buttons that play and pause a hidden <audio> with JavaScript.
<audio id="myaudio">
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
Please upgrade your browser to play audio.
</audio>
<button onclick="play();">Play</button>
<button onclick="pause();">Pause</button>
<script>
let audio = document.getElementById("myaudio");
let play = () => {
audio.play();
}
let pause = () => {
audio.pause();
}
</script>
JavaScript can create an in-memory audio element and then play an audio file.
Click the play button and JavaScript will play an audio file -- all without an <audio> tag.
<button onclick="play();">Play</button>
<script>
let play = () => {
let audio = new Audio('/media/epic.mp3');
audio.play();
}
</script>
The <audio> tag is part of a group of tags
that create multi-media experiences on the web.
This group is referred to as the Media tag group.
Together, they allow you to create powerful multi-media solutions.
These are the media tags.
| Element | Description |
|---|---|
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <video> | Creates a video player on a page |
| <source> | Adds a media source for a <video>, <audio>, or <picture> |
| <track> | Adds a text track, such as, subtitles and captions, to the media |
| <embed> | Creates a container for an external resource |
| <iframe> | Creates a frame in which another web page can be embedded |
| <svg> | Displays an scalable vector image |
| <canvas> | Creates a graphics container where JavaScript can draw |
| <img> | Displays an image |
| <area> | Specifies a map area for an image |
| <map> | Defines a client-side image map, i.e. an image with clickable areas |
| <figure> | Displays self-contained content, usually an image |
| <figcaption> | Adds a caption to a <figure> (image) element |
Here is when <audio> support started for each browser:
|
Chrome
|
4.0 | Jan 2010 |
|
Firefox
|
3.5 | Jun 2009 |
|
IE/Edge
|
9.0 | Sep 2012 |
|
Opera
|
10.0 | Aug 2009 |
|
Safari
|
11.5 | Jun 2009 |
