Adding audio to a web page

Web Design with HTML & CSS

🕑 This lesson will take about 5 minutes

In this lesson, you will learn how to add audio to a webpage using the HTML5 audio tag. Because this tag was introduced in HTML5, it may not be supported in some older browsers. It is also important to note that some audio file types may not be supported in different browsers and that the autoplay feature may not work in newer browsers that block audio from automatically playing when a page loads.

At the time of writing this tutorial, the following browsers support these file types using the HTML5 audio tag:

  • Chrome: MP3, WAV, OGG

  • Internet Explorer: MP3

  • Firefox: MP3, WAV, OGG

  • Safari: MP3, WAV

  • Opera: MP3, WAV, OGG

Using MP3 files for audio would be the safest bet as it is supported by all the major browsers now. For this tutorial, I will demonstrate using the HTML5 audio tag with an MP3 file. You can get free audio files from a range of sources including the YouTube Audio Library and Freesound.

When you add audio to a page you can specify whether you want to allow the audio to automatically play (may not work with newer browsers), loop over, and if you also want to show or hide the audio player controls which will look like this:

It is highly recommended to include the audio player controls as newer versions of browsers block audio from auto-playing. The user will need a way of playing and stopping the audio. 

The video below shows how you can use the HTML5 audio tag to add an audio file to a webpage. It also shows how to add controls and how to autoplay and loop audio files. Watch the video below and then scroll down to see the sample code.

The sample code below shows how to add an audio file to a webpage. All you need to do is replace the filename/filetypes with whatever you are using. You might also like to remove the autoplay, loop, or control features. Note that all three of these features are enabled in the example below – add or remove these features from the audio tag as you like.

This tutorial video includes a portion of free music from the YouTube Audio Library. Music from the audio library can be used in your videos by you as long as you do not make it available, distribute or perform the music separately from your videos into which you have incorporated the music files, and as long as the music is not used in an illegal manner or in connection with any illegal content. Always check the license or terms and conditions when using stock images, video or audio from other websites.

Next lesson: Adding video to a web page