Mastering the HTML5 audio tag

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