The ability to elegantly play audio on a web page has long been a task where Flash developers had an undeniable edge. While there were some almost passable workarounds (I still use one elsewhere on this site), the only true cross-browser option has been to use an embedded .swf player – and, of course, that doesn’t work within the iEmpire. OSX is OK with it, but you can’t get flashy with the iPad, iPhone, iPod.

Thank goodness for the web’s new hypertext protocol, HTML5.

We recently had to take a web page containing twenty six Flash players and make it work on the iPad. Mindy’s research fingered the latest jPlayer as a possible solution: it’s a jQuery player that uses HTML5′s <audio> object where that’s supported, and degrades to a Flash player for older browsers. It’s a complete solution, but it wasn’t ideal for us:

• jPlayer depended on jQuery, even if you didn’t need that library for anything else.
• For full cross-browser support it required all files to be available in both .mp3 and .ogg format.
• The only GUI it offered out of the box was far too big and clunky for our web page.
• It needed a lot of HTML and javascript to implement, especially for multiple players.

I don’t want to persuade you away from jPlayer. I think it’s a well designed solution which I’ll certainly use myself in the future, and their latest implementation was only in its infancy when we considered it. But it just wasn’t what we wanted here.

The web page in question had been using Martin Lane’s Flash-based Audio Player which was small and elegant. We wanted something that looked not too dissimilar. Something … actually, something not a lot different from the default HTML5 audio player. Hmmm …

When the penny finally dropped I rolled my own solution. It degrades gracefully from HTML5 to Flash to an audio file URL (if we end up here most browsers will open this in QuickTime). Since the initial implementation I’ve further refined it so that it’s no longer necessary to present all the files in both .mp3 and .ogg. My apologies to Mindy, who has probably batch encoded thousands of them by the time this further revelation arrived. Here’s the five step plan.

1. Download Martin Lane’s audio player from the WordPress Plugin Directory.
2. Extract the following files to a directory on your website:
3. audio-player.js
4. player.swf
5. Put embedaudio.js on your website and set the variable sAudioPlayerPath at the top of the file to the audio player directory.
6. Add embedaudio.js into your page header.
7. Code the player or players in your HTML.

The HTML is very simple. It has a container element with an anchor inside it. The container element can be anything you wish: a span, a table cell, a paragraph or, as in this example, a div. As long as the container element has the class embedaudio you’re sweet. The anchor text is what visitors will see if scripting’s turned off or there’s any other point of failure; the anchor reference is the .mp3 audio file you want to play.

<div class="embedaudio">

  <a href="http://www.else.co.nz/music/demos/LeighHarrison-StartOutTall.mp3">PLAY</a>

</div>

So how does it work?

1. When the page is ready, we determine whether the browser supports an HTML5 player for .mp3 files.
2. We list all page elements of the embedaudio class and iterate through the list.
3. We extract the filename from each element’s anchor.
4. Within each element we create either an <audio> or a flash object with the appropriate settings to play the file.

Depending on your browser’s capabilities, the loaded page will either show you the native HTML5 audio player or, if that’s not supported for .mp3, the Flash player. If neither is available you’ll see the play link. This has been tested with Chrome, Firefox, Internet Exploder, iPad, Opera and Safari.

That’s all there is to it. A big thank you to Jesse Skinner and Tyler Hall for code snippets used in my implementation.