The HTML `audio` tag
Discover the basics of working with the HTML `audio` tag
The audio
tag allows you to embed audio content in your HTML pages.
This element can stream audio, maybe using a microphone via getUserMedia()
, or it can play an audio source which you reference using the src
attribute:
<audio src="file.mp3" />
By default the browser does not show any controls for this element. Which means the audio will play only if set to autoplay (more on this later) and the user can’t see how to stop it, or control the volume or move through the track.
To show the built-in controls, you can add the controls
attribute:
<audio src="file.mp3" controls />
Controls can have a custom skin.
You can specify the MIME type of the audio file using the type
attribute. If not set, the browser will try to automatically determine it:
<audio src="file.mp3" controls type="audio/mpeg" />
An audio file by default does not play automatically. Add the autoplay
attribute to play the audio automatically:
<audio src="file.mp3" controls autoplay />
Note: mobile browsers don’t allow autoplay
The loop
attribute restarts the audio playing at 0:00 if set, otherwise if not present the audio stops at the end of the file:
<audio src="file.mp3" controls autoplay loop />
You can also play an audio file muted using the muted
attribute (not really sure what’s the usefulness of this):
<audio src="file.mp3" controls autoplay loop muted />
CORS
Audio is subject to CORS and unless you allow it on the server side, an audio file can’t be played cross-origin.
Preloading the audio
If you don’t set autoplay
, the spec says that browsers will only download the audio metadata (to find out the length, for example) but will not download the audio itself.
You can force preloading the audio using
<audio src="song.mp3" preload="auto" />
Displaying content if audio
is not supported
The audio
tag is very well supported, up to IE9, so nowadays there should be no need to have a placeholder text, but we have this option. You just add a closing tag, and insert text between the opening and closing tag:
<audio src="song.mp3">Audio tag not supported</audio>
Adding native controls
Instead of autoplaying the audio in the background, you can choose to ask the browser display a set of controls to let the user play the audio when they want, have some indication of the length, set the volume and let them navigate the track:
<audio src="song.mp3" controls />
This is how it looks in Chrome:
You can style controls using CSS, although this is out of the scope for this introduction.
Adding multiple sources
Browsers can implement one audio codec but not another. Maybe you want to use a newer standard which cuts file size in half but you still want to support older browsers.
You do so with the source
tag:
<audio controls>
<source src="song.opus" type="audio/ogg; codecs=opus"/>
<source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="song.mp3" type="audio/mpeg"/>
</audio>
Working with audio events
We can listen for events on each audio
element using JavaScript, to create interesting projects and interfaces. There is a lot of different events to play with.
The play
event is fired when the audio playback starts:
document.querySelector('video').addEventListener('play', () => {
alert('Audio is playing!!!')
})
You can also directly add this event (as the others) using the on<event>
attribute directly on the HTML element:
<audio src="song.mp3" controls onplay="playing()" />
const playing = () => {
alert('Audio is playing!!!')
}
These are a few events you can listen to:
play
audio started playingpause
audio was pausedended
audio playing completedtimeupdate
the user interacted with the playback timeline and went forward/backwardsvolumechange
the user changed the volume
There are a lot more events related to the audio loading, and you can find the full list on MDN.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025