Learn the fundamentals of using the HTML audio tag

The audio tag in HTML is used to embed audio content in web pages. It allows you to stream audio from sources like a microphone using getUserMedia() or play an audio file referenced by the src attribute:

<audio src="file.mp3" />

By default, the browser does not show any controls for the audio element, meaning the audio will only play if set to autoplay (more on this later). Additionally, the user is unable to stop, control the volume, or navigate the track.

To display the built-in controls, you can add the controls attribute:

<audio src="file.mp3" controls />

It is also possible to apply a custom skin to the controls.

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" />

By default, an audio file does not play automatically. To enable autoplay, add the autoplay attribute:

<audio src="file.mp3" controls autoplay />

Note: Autoplay is not allowed on mobile browsers.

The loop attribute restarts the audio from the beginning (0:00) if set. 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, although the usefulness of this is questionable:

<audio src="file.mp3" controls autoplay loop muted />

CORS (Cross-Origin Resource Sharing)

Audio files are subject to CORS, meaning that unless you allow it on the server side, an audio file cannot be played cross-origin.

Preloading the audio

If the autoplay attribute is not set, browsers will only download the audio metadata (e.g., length) but not the audio file itself. You can force preloading of the audio by using the preload attribute with the value “auto”:

<audio src="song.mp3" preload="auto" />

Displaying content if audio is not supported

The audio tag is well-supported, even in older browsers like IE9, so it is unlikely that you will need to have placeholder text. However, if desired, you can add closing tags and insert text between the opening and closing tags:

<audio src="song.mp3">Audio tag not supported</audio>

Adding native controls

Instead of automatically playing the audio in the background, you can choose to display native controls that allow the user to play the audio when desired, view the length, adjust the volume, and navigate the track:

<audio src="song.mp3" controls />

Here is an example of how the controls look in Chrome:

Audio element

You can customize the appearance of the controls using CSS, but that is beyond the scope of this introduction.

Adding multiple sources

Different browsers may support different audio codecs. To ensure compatibility with older browsers while utilizing newer, more efficient codecs, you can include multiple source tags:

<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

You can listen for various events on each audio element using JavaScript. This allows you to create interactive projects and interfaces. Here are a few available events:

document.querySelector('audio').addEventListener('play', () => {
 alert('Audio is playing!!!')
})

Alternatively, you can directly add the event using the on<event> attribute on the HTML element:

<audio src="song.mp3" controls onplay="playing()" />

const playing = () => {
 alert('Audio is playing!!!')
}

These are just a few of the events you can listen for:

  • play: Audio started playing.
  • pause: Audio was paused.
  • ended: Audio playback completed.
  • timeupdate: The user interacted with the playback timeline, seeking forward or backward.
  • volumechange: The user changed the volume.

There are many more events related to audio loading, and you can find the full list on MDN here.