A couple of days ago I was watching a talk by Paul Irish at the jQuery Boston Conference. During his talk he mentioned video for everybody. Now, Video for Everyone does not use JavaScript to achieve it’s objective but simply a predefined chunk of HTML.

I thought I would take a stab at creating a jQuery plugin that would do something similar to Video for Everybody but instead, for audio. Because I am using JavaScript and not a chunk of HTML to reach my objective, I definitely wanted to use this aspect to ensure I only inject into the page the least amount of code needed.

I also wanted to make the plugin simple enough so that the user does not start to feel like they might as well have written the HTML code themselves. So what is the very least you need to allow users across browsers to have access to your audio track? Have a look at the following HTML:

<video width="640" height="360">
	<source src="audio.ogg" type="audio/ogg; codecs='vorbis'"/>
	<source src="audio.mp3" type="audio/mpeg;" />
	<source src="audio.wav" type="audio/wav; codecs='1'" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="audioplayer.swf">
		<param name="movie" value="audioplayer.swf" />
		<embed src="audioplayer.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="640" height="360"
	</object>
	<p>Your browser does not support HTML5 audio nor Flash. You can download the audio file here: <a href="download.mp3">Download Track</a></p>
</video>

That’s a bunch of lines of code to have in your pages and have the browser parse on each load. Let’s look at how you would achieve the same cross browser support using AudioForAll:

$().ready(function() {
	$("#rockitout").audioForAll({
		"id" : "test",
		"name" : "test",
		"width" : "200px",
		"height" : "80px",
		"audio" : "swf/betty.mp3",
		"params" : ["", "swf/niftyplayer.swf?file=swf/betty.mp3"]
	});
});

That is it! The added benefit to the above is that all that will be injected into your page, will be the code required by the browser to play your audio track.

AudioForAll exposes many more options than the above that allow you to customize it to fit your needs but, the above is the minimum required options that will ensure that you will get a working end result. With that said, let’s look at the options exposed:

AudioForAll Options

id [required]

The id attribute for the element injected.

name [required]

The name attribute for the element injected. Internet Explorer 7 does not seem to like it if the object tag does not have a name attribute so it is therefore required.

width [required]

The width of the element

height [required]

The height of the element

audio [required]

The value passed to the src attribute of the HTML5 audio element

params [required]

This option takes in an array for the object tag, currently it takes two: allowScriptAccess and movie in that order.

preload

Sets the value of the preload attribute for the HTML5 audio tag.

autoplay

Sets the value of the autoplay attribute for the HTML5 audio tag.

loop

Sets the value of the loop attribute for the HTML5 audio tag.

controls

Sets the value of the controls attribute for the HTML5 audio tag.

message

This is the message that will shown to the user if there browser does not support the audio tag not Flash. The default message is: Your browser does not support the HTML <adio> tag nor Flash. You can download the audio file here:

One of the other aspects of cross browser audio support is audio formats. AudioForAll takes care of this as well. I used a little snippet from the awesome Modernizr library to detect which audio format the browsers supports and will append the appropriate extension onto the audio file name.

All that is required from the end user is to place all of the audio files into one directory and name them similarly. If you need an audio application that will be able to create all of the formats you need, there is no need to look further than Audacity.

View AudioForAll in Action

That pretty much is all there is to using AudioForAll. You can grab the source from Github, fork me, add what you require and submit pull requests or keep them on your own fork. Looking forward to hearing everyone’s feedback and suggestions.