Want to add music, a podcast episode, or sound effects to your page? The <audio> element makes it straightforward. Just point it to an audio file, and the browser handles the playback.
Basic Audio Player
Add the controls attribute to show play, pause, volume, and other playback controls. Without it, the audio will be invisible and silent — you would need JavaScript to trigger it.
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Providing Multiple Formats
Not all browsers support the same audio formats. MP3 works everywhere, but you can provide multiple <source> elements as fallbacks. The browser picks the first format it supports.
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
<source src="song.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
The text between the opening and closing <audio> tags only shows if the browser cannot play any of the provided sources.
Autoplay and Loop
The autoplay attribute starts playing as soon as the page loads. The loop attribute repeats the audio when it ends. Use these sparingly — autoplaying audio can be annoying.
<audio controls autoplay loop>
<source src="background.mp3" type="audio/mpeg">
</audio>
Most browsers block autoplay unless the user has interacted with the page first. So do not rely on autoplay working all the time — it is up to the browser's policy.