An audio player can be added to a web page with the <audio> tag.
The audio file to play is specified with a src attribute, or a nested <source> tag.
Supported video file formats include mp3, wav, and ogg.
An <audio> element.
<audio controls>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
Please upgrade your browser to play audio.
</audio>
The <audio> tag creates an audio control.
The controls attribute adds play, pause, timer, and volume audio controls.
The <source> tags set the audio files to play and their media types. The browser selects the first recognized format.
If the browser does not support the <audio> tag, then the text inside the tag will display.
HTML5 supports three audio formats MP3, WAV, and OGG.
Their media types are audio/mpeg, audio/wav, and audio/ogg respectively.
Most browsers accept these formats.
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
 Chrome
|
Yes | Yes | Yes |
 Firefox
|
Yes | Yes | Yes |
 IE/Edge
|
Yes | Yes | Yes |
 Opera
|
Yes | Yes | Yes |
 Safari
|
Yes | Yes | No |
The <audio> element exposes a DOM (Document Object Model) that allows programmatic control of the audio. This example shows how to play and pause 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 class="btn" onclick="play();">Play</button>
<button class="btn" onclick="pause();">Pause</button>
<script>
var element = document.getElementById("myaudio");
let play = () => {
element.play();
}
let pause = () => {
element.pause();
}
</script>
For details on <audio>, see our HTML audio Tag Reference.
This table lists when <audio> support started for each browser:
|
Chrome
|
4.0 | Mar 2011 |
|
Firefox
|
3.5 | Jun 2009 |
|
IE/Edge
|
9.0 | Mar 2011 |
|
Opera
|
10.5 | Feb 2010 |
|
Safari
|
4.0 | Jun 2009 |
