Seanooi.net

Audio For Everybody!

Prologue

A few posts back I used the new HTML 5 video tag to display a video. That chunk of code was written by Kroc Camen and is compatible across most major browsers, including IE and the iPhone. One of the reasons I like it is because there is no JavaScript involved, making it lightweight.

It was his Video for Everybody post that inspired me to write this post. I figured since there's a cross-browser compatible code for the video tag, it would only be right to have one for the audio tag as well; A simple Google search came up with one related site that was very poorly written, so I decided to write one myself, based heavily on Kroc's code.

I've tested my codes on the iPhone and on common web browsers which includes Firefox, Safari and Opera on both Windows and Mac OS X, and Google Chrome and IE on Windows.

Compatibility

The code is validated as HTML 5. It will first try the HTML 5 playback, and fallback to flash if needed. If neither works, it will display an image showing users that no streaming capability is available and will ask to download the file instead.

• Firefox 3.5: HTML5-OGG
• Safari 4 (Mac): HTML5-MP3
• Safari 4 (PC): HTML5-MP3→Flash
• iPhone OS 3.1.2: HTML5-MP3 (Small play area due to the lack of the width & height attribute)
• Opera 10: QT→Flash
• Chrome 3: HTML5-OGG
• <= IE 6: Flash
• >= IE 7: Windows Media Player

Firefox

Chrome

IE

iPhone

Opera

The Code

<!-- Try HTML 5 playback first. -->
	<audio controls="controls">
	<source src="__AUDIO__.OGG" type="audio/ogg" /> <!-- Firefox and Chrome -->
	<source src="__AUDIO__.MP3" type="audio/mpeg" /> <!-- Safari and iPhone -->

<!-- Windows Media Player class id to enable native streaming on IE 7 and above. IE 6 and below will go straight to flash player -->
	<!--[if gt IE 6]>
	<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="320" height="45"><!
	[endif]-->

	<!--[if !IE]><!-->
	<object type="audio/mpeg" data="__AUDIO__.MP3">
	<!--<![endif]-->

<!-- Windows Media Player controls -->
	<param name="url" value="__AUDIO__.MP3" />
	<param name="autostart" value="false" />
	<param name="uiMode" value="full" />

<!-- Flash fallback -->
	<object height="24" width="320" type="application/x-shockwave-flash" data="__FLASH__.SWF" id="audioplayer">
	<param name="movie" value="__FLASH__.SWF" />
	<param name="FlashVars" value="playerID=audioplayer&amp;soundFile=__AUDIO__.MP3" />

<!-- Fallback image when nothing works -->
	<img class src="__POSTER__.JPG" width="128" height="135" alt="Title" title="No audio playback capabilities, please download the audio below" />

	</object><!--[if gt IE 6]><!-->
	</object><!--<![endif]-->
</audio> 

<!-- Download links outside the audio tag -->
<p>Download Audio: <a href="__AUDIO__.MP3">Audio Format "MP3"</a> | <a href="__AUDIO__.OGG">Audio Format "OGG"</a></p>

The line break in line 8 is due to a bug in IE. I'm not sure if it applies to the audio tag as well, but no harm being safe. A more compact version of the source code follows.

<audio controls="controls">
	<source src="__AUDIO__.OGG" type="audio/ogg" />
	<source src="__AUDIO__.MP3" type="audio/mpeg" />
	<!--[if gt IE 6]>
	<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="320" height="45"><!
	[endif]--><!--[if !IE]><!-->
	<object type="audio/mpeg" data="__AUDIO__.MP3">
	<!--<![endif]-->
	<param name="url" value="__AUDIO__.MP3" />
	<param name="autostart" value="false" />
	<param name="uiMode" value="full" />
	<object height="24" width="320" type="application/x-shockwave-flash" data="__FLASH__.SWF" id="audioplayer">
	<param name="movie" value="__FLASH__.SWF" />
	<param name="FlashVars" value="playerID=audioplayer&amp;soundFile=__AUDIO__.MP3" />
	<img class src="__POSTER__.JPG" width="128" height="135" alt="Title" title="No audio playback capabilities, please download the audio below" />
	</object><!--[if gt IE 6]><!-->
	</object><!--<![endif]-->
</audio> 
<p>Download Audio: <a href="__AUDIO__.MP3">Audio Format "MP3"</a> | <a href="__AUDIO__.OGG">Audio Format "OGG"</a></p>

• Replace __AUDIO__.MP3 with the path to your MP3 encoded file
• Replace __AUDIO__.OGG with the path to your OGG encoded file
• Replace __FLASH__.SWF with the path to your flash player. I use the standalone version of WordPress Audio Player
• Replace __POSTER__.JPG with your JPEG image file for fallback purposes

One reason to put the download links outside the audio tag as said by Kroc for his Video for Everybody code: Give people your audio files—you want them to hear the audio anyway and you are fooling yourself if you think that they shouldn’t be allowed to download the audio.

I am not very confident when it comes to writing codes and explaining. In fact I suck at it, so please contact me if you spot any mistakes in my post. Any kind of help to further improve the code is welcomed as well.