1. Web Design
  2. HTML

HTML Element: audio

Scroll to top
Read Time: 3 min

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.


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

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

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

  <source src="soundtrack.mp3 "type="audio/mpeg">
  <source src="soundtrack.ogg "type="audio/ogg">


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

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


Hawaiian Ukulele track by Andy Slatter.


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.


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:

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

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 audio element


microsoft edge audio elementmicrosoft edge audio elementmicrosoft edge audio element

Microsoft Edge

chrome audio element


safari audio elementsafari audio elementsafari audio element


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

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.