How to Add Sound to an HTML5 Web Page

Man at work on laptop.
PeopleImages/Getty Images

HTML5 makes it easy to add sound and music to your web pages with the element. In fact, the hardest thing to do is create the multiple sources you need to make sure that your sound files play on the widest variety of browsers.

The benefit of using HTML5 is that you can embed sound just by using a couple of tags. The browsers, then, play the sound just like they would display an image when you use an IMG element.

How to Add Sound to an HTML5 Web Page

You'll need an HTML Editor, a sound file (preferably in MP3 format), and a sound file converter.

  1. First, you need a sound file. It's best to record the file as an MP3 (.mp3) as this has high sound quality and is supported by the most browsers (Android 2.3+, Chrome 6+, IE 9+, iOS 3+, and Safari 5+).
  2. Convert your file to Vorbis format (.ogg) to add in Firefox 3.6+ and Opera 10.5+ support. You can use a converter like one found on Vorbis.com. You can also convert your MP3 to a WAV file format (.wav) to get Firefox and Opera support. I recommend posting your file in all three types, just for security, but the most you need are MP3 and one other type.
  3. Upload all the audio files to your web server and make a note of the directory you stored them in. It's a good idea to place them in a sub-directory just for audio files, like most designers save images in an images directory.
  4. Add the AUDIO element to your HTML file where you want the sound file controls to be displayed. <audio controls>
  5. Place SOURCE elements for each audio file you upload inside the AUDIO element:
    1. <source src="/audio/sound.mp3">
    2. <source src="/audio/sound.ogg"> <source src="/audio/sound.wav">
  1. Any HTML inside the AUDIO element will be used as a fallback for browsers that don't support the AUDIO element. So add some HTML. The easiest way is to add HTML to let them download the file, but you can also use HTML 4.01 embedding methods to play the sound. Here is a simple fallback: <p>Your browser does not support audio playback, download the file:
    1. <a href="/audio/sound.mp3">MP3</a>,
    2. <a href="/audio/sound.ogg">Vorbis</a>,<a href="/audio/sound.wav">WAV</a>
  2. The last thing you need to do is close your AUDIO element: </audio>
  3. When you're done, your HTML should look like this: <audio controls>
    1.   <source src="/audio/sound.mp3">
    2.   <source src="/audio/sound.ogg">
    3.   <source src="/audio/sound.wav">
    4.   <p>Your browser does not support audio playback, download the file:
    5.   <a href="/audio/sound.mp3">MP3</a>,
    6.   <a href="/audio/sound.ogg">Vorbis</a>,
    7.   <a href="/audio/sound.wav">WAV</a></audio>

Additional Tips

  1. Be sure to use the HTML5 doctype () so that your HTML will validate
  2. Review the attributes available for the element to see what other options you can add to your element.
  3. Note that we set up the HTML to include controls by default and have autoplay turned off. You can, of course, change that, but remember that many people find sound that starts automatically/that they can't control to be annoying at best, and will often just leave the page when that happens.