Adding Audio with the new HTML5 audio tag

HTML5, currently under development, offers many more features and possibilities for developers than existing HTML markup. HTML5 is not some big change, it is merely new features and possibilities available that does not require existing markup to be thrown away. And best yet, HTML5 is already supported!

HTML5 has introduced several new elements including an <audio> element. Embedding audio without a third-party plugin used to be impossible. Now, with the new <audio> element, we can easily embed audio using the <audio> tag and no longer have to rely on plugins.

You’ll first see how to create a simple web site. You’ll then add the simple <audio> tag, and then you’ll learn how to make your audio be compatible across multiple browsers.

Create a WebMatrix website

If you need help downloading and installing WebMatrix, it may be a good idea to read Getting Started with WebMatrix. The article provides step by step instructions on installing WebMatrix

WebMatrix gives you a number of different ways that you can create a new web site. You can use an existing open source application such as WordPress, Joomla, DotNetNuke or Umbraco, or you can create a site yourself by either coding everything or by using a small, simple template. For this example we will be using an empty site template.

Once WebMatrix is open you will see all the different options on the welcome screen. Click “Site from Template.”

Choose the “Empty Site” template, give it a name and click OK

Clicking ok will take you to your WebMatrix workspace. This contains information about your local host as well a provides resources on developing your site.

You’ll notice that WebMatrix allows you to move between different workspaces by selecting the buttons on the left hand side. At present the Site button is selected which gives you details on your web site, such as the URL of the site, and other tools that you can use such as monitoring your site requests. You can look into this workspaces as you work but for this article, we will be working with our Files workspace. To get to your Files workspace, click the "Files" tab on the lower left hand of WebMatrix.

Since we chose the empty site template, we do not have any files making up our website. We need to create a new file. Create a new html file by clicking on the "new" icon on the menu ribbon.

In order for the <audio> tag to work, we will need some sort of audio file in our workspace. Suitable audio formats are .mp3, .wav and .ogg. Place this audio file in your files workspace. This can be done two ways: right click on the root folder of our site and choosing “add existing file” or by moving our audio into the website file.

Adding Audio to our Website

With your .html file open, we will add our simple <audio> element. Somewhere between <body></body>, add our <audio> tag like so:

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

Make sure to set the src equal to your audio file name and format. Here, I am using a .mp3 audio file.

Notice, we defined two attributes in our <audio> tag: src and controls. The src attribute is where the audio file is located. The controls attribute determines if the play/pause, time, volume, etc. controls show up on the page. Since we defined the controls attribute, the controls will be visible.

In addition to the attributes we have defined, you can add further attributes to the <audio> tag.

  • Autoplay: audio will begin to play once page is loaded
  • Loop: continuously loops the audio after it is finished
  • Preload: determines if the audio should be loaded when the page is or not. Note: this attribute is ignored if the autoplay attribute is specified.

Open your file in a web browser. Notice anything? Your audio player may not be working depending on what browser and file type you are using. One thing to know about audio and video on the web, no single version of audio and video are compatible with ALL browsers!

For instance, since I used an .mp3 audio file, the <audio> tag works perfectly with Internet Explorer 9

But, unfortunately, Firefox 3.5 does not support .mp3 audio files. So, if I try to open my .html file with Firefox, my page will look like this:

To ensure that our website is cross-browser compatible we must have all the different formats of audio supported by browsers (not one browser supports all audio types).

Audio Conversion for Browser Compatibility

To make your website with audio the most compatible it can be, you need to keep in mind that not only 1 version of your audio is cross-compatible. The nice thing about HTML5’s <audio> tag is you can nest <source> tags within it (same with the <video> tag). With this, you can link different versions of your audio file, allowing the browser to play the correct video version for that browser.

To make your website more compatible, you will need to have 3 different versions of your video:

  • A .mp3 version
  • A .wav version
  • A .ogg version

You may be wondering how you create three different versions of your audio file. Audio converting allows you to change the file types of your audio file. There are tons of audio conversion software available – some even built into to audio players.

For this example, I will be using FreeRip, a free audio conversion download available at freerip.com.

Downloading and Installing FreeRip

To download FreeRip visit freerip.com. About halfway down the page there is a “download” button.

Run the file, Select the Setup language, and walk through the setup wizard

After the installation is complete and you have restarted your computer, open FreeRip. It will prompt your to purchase the upgraded version – you can just ignore this. After, you will see this:

If you already have the audio file you want to convert (i.e. it does not need to be ripped from a cd), click on the down arrow next to the cd icon and change the options to “Converter”

Now, you need to add the files you want to convert. Click “file” and choose “add files to convert”. Find your audio and click “open”. Your audio file will now be visible in the white box.

Now, we need to choose what type of audio file we want to convert it to. Click the down arrow next to the cd with play button icon. Choose the audio type you want. For this example we need to convert our .mp3 file to a .wav and a .ogg (called Vorbis with this program).

Once you have chosen the conversion type, a progress box will pop up.

Once it is completed, you will have your converted audio file! It can be found on your desktop (this is the default location) or somewhere else that you may have specified.

Convert your audio file to the other version that you may need.

Add these audio files to your files workspace in WebMatrix. All together you should have 3 different audio files.

Adding our Compatible Audio files to our Webpage

Now, let’s get back to our website. Previously we had a simple

In your .html file, replace your old <audio> tag with:

<audio controls>
   <source src="Kalimba.mp3" />  
   <source src="Kalimba.wav" />
   <source src="Kalimba.ogg" />  
</audio> 

Similar to the <video> tag, we can nest our three <source> tags within our <audio> tag. The browser can go through the source tags until it gets to the audio file that is compatible with it.

Open your file in the same web browsers as before. Our webpage should now work in the browsers it did not work before.

Our audio files works the same in Internet Explorer 9, but now it also works in Firefox 3.5

Additional Resources

Download WebMatrix http://www.microsoft.com/web/webmatrix/

Learn how to Download and Install WebMatrix http://www.microsoft.com/web/post/web-development-101-part-1-getting-started-with-webmatrix

Learn more http://www.microsoft.com/web/post/Web-Development-101-using-WebMatrix

Create a website with a WebMatrix site template http://www.microsoft.com/web/post/create-a-website-from-a-webmatrix-site-template

Publish your website http://www.microsoft.com/web/post/how-to-publish-a-web-application-using-webmatrix

Learn to download, edit and republish your website http://www.microsoft.com/web/post/download-edit-and-republish-your-website-with-webmatrix

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!