Posts Tagged HTML5

HTML5, The Audio Element

Adding audio to HTML documents has always been challenging. HTML requires you to use a plug-in for audio controls. An HTML plug-in could be described as software that runs embedded into, or “on top of”, your web browser. Before Flash dominated the market, the plug-ins you could use for this were Windows Media Player, QuickTime, and Real Audio. The problem with this was that not everybody had these plug-ins installed on their computer, and that goes for Flash as well. You often times had some text explaining which media player works best with the website and required users to download and install it themselves. If you were thorough, you would write some unnecessary JavaScript to try and determine the plug-in that would work best, and since each plug-in has its own way of doing certain things, it only made the procedure that much more of a “task”. Things change with HTML5.

HTML5 comes with its very own <audio> element. To have audio in your HTML5 document, you use the following code:

<audio src="audio_file.mp3"></audio>

If you want to give your users controls, such as play and pause, you need to specify the ‘controls’ boolean attribute. A boolean attribute doesn’t have a value, if it’s there, the value is true, and if it’s not there the value is false. If you’re coding an XHTML document, you could say controls=”controls”.

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

If you want to auto-play your file, you can use the ‘autoplay’ attribute. If you don’t want to auto-play, but you know the file will be played at some point, you can buffer, or pre-load the file. Buffering will tell the browser to download the file, but not to play it yet. There are two attributes for buffering: ‘autobuffer’ and ‘preload’. ‘autobuffer’ is a boolean attribute, and therefore does not take any values, merely having it in your attribute list will turn on auto-buffering. But beware, Safari auto-buffers by default. The ‘preload’ attribute takes the following values: none, auto and metadata. Using preload=”none”, you can explicitly tell browsers not to buffer the audio, and in turn, not to download the audio file until the user’s ready to listen to it. If you have a site with multiple audio files on one page, allowing them to auto-buffer would consume a lot of unnecessary bandwidth.

<audio controls autobuffer src="audio_file.mp3"></audio>
<audio controls preload="none" src="audio_file.mp3"></audio>

Easy, right? Almost perfect? Yep, almost. Unfortunately there are these things called patents, and while some audio formats are free to use and develop with, some are patent protected. The MP3 audio format is patent protected, while the M4A or AAC is patent encumbered. What this means to you is that every browser may not support the audio format you have. The audio element has an optional ‘child’ element called ‘source’. You can use it to specify various formats or even different URL locations for your audio track. The browser will use whichever one it finds that it supports or can play. The format of choice in the open-source realm is OGG Vorbis, .ogg files. FireFox and Opera support OGG but Safari does not. This means that you will most likely have to find yourself audio software that will convert between audio formats. Thankfully, many exist. This also means that you may need to upload multiple copies of your audio file to the web server.

The ‘source’ element has two attributes, ‘src’ and ‘type’. The ‘src’ attribute let’s you specify the URL to where the audio-file is located. The ‘type’ attribute is optional, it allows you to specify the audio format type for each file. If the ‘type’ attribute is not provided, the web browser will try to determine the file type on its own – most likely by fetching the header information from the URL. Other content that goes inside the audio element should be ignored by browsers which support it, but rendered by browsers that do not. This way you can provide a failsafe for those not supporting HTML5 or the HTML5 audio element.

<audio controls>
	<!-- specify file types with the source element -->
	<source src="audio_file.mp3" type="audio/mp3">
	<source src="audio_file.ogg" type="audio/ogg">
	<!-- display a flash player in unnsuported browsers -->
	<object type="application/x-shockwave-flash" data="media_player.swf?file=audio_file.mp3">
		<param name="movie" value="media_player.swf?file=audio_file.mp3">
		<!-- if flash isn't supported, display a link -->
		<a href="audio_file.mp3">Download the file</a>


Here is an example that should fall back to using a custom Flash player I made, if your browser isn’t equipped with the HTML5 audio element. Enjoy the music!

Making Me Nervous, By: Brad Sucks:

VN:F [1.9.22_1171]
Rating: 8.8/10 (13 votes cast)
VN:F [1.9.22_1171]
Rating: +6 (from 8 votes)