1. Computing

Discuss in my forum

How to Add Sound to an HTML5 Web Page

Using the HTML5 Audio Element

By

HTML5 makes it easy to add sound and music to your web pages with the AUDIO 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.

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

Dificulty: Average

Time Required: 10 minutes

Here's How:

  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:
    <source src="/audio/sound.mp3">
    <source src="/audio/sound.ogg">
    <source src="/audio/sound.wav">
  6. 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 embeding methods to play the sound. Here is a simple fallback:
    <p>Your browser does not support audio playback, download the file:
    <a href="/audio/sound.mp3">MP3</a>,
    <a href="/audio/sound.ogg">Vorbis</a>,
    <a href="/audio/sound.wav">WAV</a>
  7. The last thing you need to do is close your AUDIO element:
    </audio>
  8. When you're done, your HTML should look like this:
    <audio controls>
      <source src="/audio/sound.mp3">
      <source src="/audio/sound.ogg">
      <source src="/audio/sound.wav">
      <p>Your browser does not support audio playback, download the file:
      <a href="/audio/sound.mp3">MP3</a>,
      <a href="/audio/sound.ogg">Vorbis</a>,
      <a href="/audio/sound.wav">WAV</a>
    </audio>

Tips:

  1. Be sure to use the HTML5 doctype (<!doctype html>) so that your HTML will validate
  2. Review the attributes available for the AUDIO element to see what other options you can add to your element.
  3. Note that I 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 and they can't control to be annoying at best, and will often just leave the page when that happens.

What You Need:

  • HTML Editor
  • Sound file (preferably in MP3 format)
  • Sound file converter
  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Web Design
  5. Multimedia
  6. Sound
  7. How to Add Sound to an HTML5 Web Page

©2014 About.com. All rights reserved.