HTML5 Tutorial - Audio

Audio

Let's have something fun to start with. We are now talking about web browser supporting audio file in native, just like how <img> tag is supported since 1994. HTML5 is likely to put an end to audio plug-in such as Microsoft Windows Media player, Microsoft Silverlight, Apple QuickTime and the infamous Adobe Flash.

If you don't see a audio player control in the dotted box above, your web browser probably don't support the audio tag.

Native Audio Player controls

Above is a gallery of audio players by major web browsers. As you can see the size of the player control varies from one to another, IE9 player is exceptionally large in compared to Safari player. This can be a disaster to a web designer.

If you are using Safari for Windows but without QuickTime, your Safari is not going to support media tag (both <audio> and <video>) in "native". I suppose Safari is relying on QuickTime codec to play media file in the browser.

How to?

In order to make your web page plays music, the html code can be as simple as

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

Unfortunately, the most popular audio format MPEG3(.mp3) is not an Open standard, it is patent encumbered. That means, web browser needs to pay a sum of money in order to decode it, and that might not be financially feasible for smaller company or organization. As you can see from table below, only those big boys are rich enough to decode MP3. Firefox and Opera supports only Vorbis (.ogg) format which is an Open standard.

On the other hand, the open standard Vorbis (*.ogg) is not supported by Safari and IE9. Hence, it is always good to have both Mp3 and Ogg side to side available.

Browser .mp3 .wav .ogg
Mozzila Firefox 3.6
Opera 10.63
Google Chrome 8.0
Apple Safari 5.0.3 (with QuickTime)
Microsoft IE 9 Beta

Test how far your browser support audio tag using "HTML5 <audio> and Audio() Support Tester".

What you can do is ...

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

Whether or not to provide the MIME type (type="audio/mpeg") to browser is optional. Most modern web browsers are smart enough to determine the content type by itself. However, it is always good to be helpful to web browser, that makes your web browser works faster and happier.

Attributes of <audio>

Attribute Value Description
controls *Boolean attribute You need this to make the native audio player appear. Otherwise, you would have to use DOM to control the audio element to play your music.
autoplay *Boolean attribute If this guy exists, the browser will just play your song or your speech without asking permission from your visitor.
loop *Boolean attribute Keep repeating your music
src url The URL of your audio file
preload none | metadata | auto This attribute was formerly known as "autobuffer" and it was an boolean attribute as "controls".

none - do not buffer audio file automatically.
metadata - only buffer the metadata of audio file.
auto - buffer audio file before it gets played.

*Boolean attribute is an attribute that either present in the tag or not present. A Boolean attribute has just its name and no value. You can put it this way too, whatever value you assign to a boolean attribute means only one thing - TRUE.

<audio src="vincent.mp3" controls="true" loop="true" autoplay="true"></audio>

(This is completely unneccessary!)

<audio src="vincent.mp3" controls loop autoplay></audio>

(This is it!)

How should we cater for less modern web browser?

HTML5 is a evolution of the web, not a revolution that will totally destroy the past. Hence, let's move forward a little bit gracefully.

In order to support web browser that doesn't understand what <audio> is about, such as IE8 and below, we shall let them enjoy their good old day using <object> tag.

<audio controls>
  <source src="vincent.mp3" type="audio/mpeg"/>
  <source src="vincent.ogg" type="audio/ogg"/>
  <object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" height="86">
   <param name="movie" value="media/OriginalMusicPlayer.swf"/>
   <param name="FlashVars" value="mediaPath=vincent.mp3" />
  </object>
</audio>

If your browser doesn't suppport HTML5 but you have got flash plug-in, you probably don't want to miss the fun. Here you go ...

If the web browser support neither HTML5 nor Flash, you might as well let the user download the audio file and wish them luck on getting a player to play it.

<audio controls>
  <source src="vincent.mp3" type="audio/mpeg"/>
  <source src="vincent.ogg" type="audio/ogg"/>
  <object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" height="86">
   <param name="movie" value="media/OriginalMusicPlayer.swf"/>
   <param name="FlashVars" value="mediaPath=vincent.mp3" />
  </object>
  <a href="vincent.mp3">Download this lovely song and wish you all the best!</a>
</audio>

Instead of using the standard web browser audio player, you can write your own control, use your creativity and imagination, the sky is the limit.

<audio id="player" src="vincent.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">Vol+ </button>
<button onclick="document.getElementById('player').volume -= 0.1">Vol- </button>
</div>