HTML Element: audio

The <audio> element allows you to embed audio content (like songs, sound effects, or podcasts) directly into your web page.

It was introduced to HTML as part of the HTML5 spec back in 2014.

Syntax

The <audio> element requires an open and closing tag. You may pass a single src path:

1	<audio src="audio_file.mp3"></audio>

or additional nested source elements should you need to support multiple audio formats.

1	<audio>
2	<source src="soundtrack.mp3 "type="audio/mpeg">
3	<source src="soundtrack.ogg "type="audio/ogg">
4	</audio>

Example

Here’s an example of how to use the <audio> element to embed a single audio file into your web page:

1	<audio controls>
2	<source src="file.mp3 "type="audio/mpeg">
3	Your browser does not support the audio element.
4	</audio>

Result

Hawaiian Ukulele track by Andy Slatter.

Attributes

Here are some of the most commonly used attributes for the <audio> element:

src – Specifies the URL of the audio file to be played.
controls – Adds basic playback controls, like play, pause, and volume.
autoplay – Automatically starts playing the audio file when the page loads.
loop – Loops the audio file so it continuously repeats.
muted – Starts the audio playback with the sound muted.
preload – Specifies whether the audio should be preloaded or not.

Content

The <audio> element doesn’t have any specific content requirements, but it’s important to include at least one <source> element inside the <audio> element to ensure cross-browser compatibility. Here’s an example:

<audio>
  <source src="reel.mp3" type="audio/mpeg"> 
  <source src="reel.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

This example includes two different audio file formats, MP3 and Ogg Vorbis, with a fallback message for browsers that don't support the <audio> element.

Content may be provided inside the audio element, but it's intended for older browsers that do not support the audio element.

Browser Rendering and Styling

There’s currently no standard CSS for styling the various UI controls within the <audio> player.

There are a number of pseudo-classes, such as :playing and :paused, which allow for styling in a very limited way depending on the player state, but support is poor.

There are also a number of pseudo-classes which can be used with browser prefixes, but again, adoption is questionable.

Here’s how major browsers render the <audio> element by default:

Firefox

Microsoft Edge

Chrome

Safari

Did You Know?

You can use JavaScript to control the playback of audio files, such as the play() and pause() methods. There are many events you can tap into to offer more control to an end user.
The <audio> element can be used to create audio-based animations, like audio visualizations or sound wave animations.

Learn More

Official W3C specification <audio>