How to Add Sound to an HTML5 Web Page

Using the HTML5 Audio Element

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

Jennifer Kyrnin

Web Design / HTML Guide

Web Development Company | Web Designing Company | SEO Services Company