HTML5 Zone is brought to you in partnership with:

My name is Jean-Baptiste Jung and I’m a 29 years old web developer and professional blogger. I was born and raised in Paris, France and I now live in Belgium with my wife and our adorable cat. I first used the internet in 1998, built my first website in 2001 and finally started to work as a professional web developer in 2005. In 2010, I left my job and created my own web development studio. jb is a DZone MVB and is not an employee of DZone and has posted 55 posts at DZone. You can read more from them at their website. View Full User Profile

Mastering the HTML5 audio tag

11.08.2011
| 4818 views |
  • submit to reddit

Since internet connections are fast enought to play sounds on websites, Flash has been the tool of choice for anyone who wanted to play sounds on a website. But HTML5 is going to change the way developers can play sounds online. In this article, I’m going to show you in depth how to use the <audio> tag to play sounds on your website.

Using <audio> to insert a sound file on your website

Here is the most basic use of the <audio> tag: On this example it loads a mp3 file and play it. Notice the autoplay attribute which is used to play the sound automatically. That said, you shouldn’t play sounds automatically on a website: this is extremely boring for visitors.

<audio src="sound.mp3" autoplay></audio>

Play sound in loop

Want to loop a sound? The loop attribute is here to help. But once again, you shouldn’t abuse autoplay and loop playing if you want to prevent people from prematurely leaving your website!

<audio src="sound.mp3" autoplay loop></audio>

Display browser controls

Instead of playing sounds automatically, which is definitely a bad practice, you should let the browser display some controls such as volume, and a play/pause button. This can be done easily, simply by adding the controls attribute to the tag.

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

Multiple file formats

<audio> is supported by most modern browsers, but the problem is that different browsers do not support the same file format. Safari can play mp3s, but Firefox can’t and play .ogg files instead. But Safari can’t play .ogg files…
The solution to this problem is to use both formats, so visitors can hear your sound, whatever the browser they use.

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

Specify MIME types

When using different file formats, it is a good practice to specify the MIME type of each file in order to help browser to localize the file they support. It can be done easily, using the type attribute.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
</audio>

Fallback for old browsers

And what if the visitor still use IE6, or another prehistoric browser with no support for the <audio> tag? A fallback can be easily implemented: As shown below, a message will be displayed to browsers who do not supports the <audio> tag.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
  Your browser does not support the audio tag!
</audio>

Buffer files

When playing large files, it is indeed a good idea to buffer files. To do so, you can use the preload attribute. It accept 3 values: none (If you don’t want the file to be buffered), auto (If you want the browser to buffer the file, and metadata (To buffer only metadata when page loads).

<audio controls>
  <source src="sound.mp3" preload="auto" >
</audio>

Control HTML5 <audio> with JavaScript

Controling a HTML5 audio player with JavaScript is pretty easy. The following example (Taken from Jeremy Keith book HTML5 for WebDesigners) shows how you can buid an audio player with basic controls (Play, Pause, Volume Up, Volume Down) using HTML and JavaScript.

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
	<button onclick="document.getElementById('player').pause()">Pause</button>
	<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
	<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>

That’s all for today. I hope this article helped you to understand what you can do with the HTML5 <audio> tag. Any questions? Feel free to leave a comment below!

Source: http://www.catswhocode.com/blog/mastering-the-html5-audio-property

Published at DZone with permission of jb j, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Kathy John replied on Thu, 2012/02/23 - 11:42am

I’d like to read a writeup on how to use something like MediaElement.js to make the audio element work cross-browser.

I stopped attempting to use the audio element because of cross-browser compatibility problems. However, there is now software like MediaElement.js, which will let you use the audio element, and gives you a flash audio player with same API to make it work cross browser. I plan on using that the next time I build a website that plays audio.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.