HTML5 and the Audio tag Print
Written by Administrator   
Wednesday, 11 April 2012 16:40

If you are using the new Audio tag of HTML5, you will have to have two versions of your favorite audio file, the .mp3 format and .ogg format.  Why? It's not because HTML5 requires the 2 files, but rather not all browsers support both formats.  For example, Firefox only supports the open-source Ogg Vorbis format (.ogg) and not .mp3, and IE9 only supports the .mp3 format and not the .ogg format.  So how come we can hear .mp3 in our Firefox and .ogg in our IE9, the answer is that the browser is not supporting the format, however, your browser's plugin most commonly Flash, Silverlight or any other plugin player supporting  the format.  What the diff?  The diff is that HTML5, the latest standard set by W3C which sets the standards for the internet, does not use any plugin or extension to play your media. This means that with HTML5 your audio or video will just play without installing any other plugin or extension.

 

Most modern browsers support HTML5 including the popular IPAD, however, each browser has their own implementation and limitations hence the non support of various formats.  It is a good thing that HTML5 has provisions that makes it easy to have implement the audio tag and support most browsers, the only requirement is to have both files on hand.  Converting from 1 format to the other is relatively simple and is a minor nuisance unless you want to convert thousands of files.

For web developers, use of the Audio tag couldn't be simpler, just insert this to your html code:

 

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

 

The previous code should be all that you'll need at barest minimum to play audio in your site.  Notice the 2 song formats, what the audio tag does is try the ogg format first, if it fails goes to the next format (.mp3), so on and so forth until reaches the last line.  The last line will show if your still using a browser that is not capable of HTML5 such as IE8 and earlier.  So to cover these browser, we would do the following code:

 

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

<object width="200" height="40"  align="middle">
<paramname="movie" value="flash_player.swf" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</object>
Your browser does not support the audio tag.
</audio>

 

The previous code falls back to a Flash player using the standard object tag whenever the browser does not support HTML5. (note: Object tag was edited, it is actually longer and messier than illustrated.)

 

So using an audio tag is simpler and easier, it is still new and not a lot of people use it yet, but browsers are ready to use it, so as a web developer HTML5 is the way to go .... for now.

 

 

Last Updated on Wednesday, 11 September 2013 15:26