Getting HTML5 Audio tag and flash fallback to work nicely with all browsers

In implementing the new (yet-to-be-released) html Ambiance audio pages, I wanted to take advantage of modern browsers support of the tag. I loaded it up with a flash fallback but for some reason, in Firefox (!!!), mp3's cannot be played with html5 audio. Ambiance uses mp3 files and caf files, neither of which are supported by Firefox and html5.

I was left with 2 choices:

1. Convert the entire Ambiance library to ogg just for firefox users.
2. Fine tune the javascript to properly fall back onto the flash AudioPlayer

I decided that ogg sucks and I would not waste any time doing the conversions, so I went for number 2.

Using code from html5doctor as a guide, and using the Standalone Flash WPAudioPlayer, I came up with the following code snippet that seems to work in all browsers.

It pretty much speaks for itself, but here is quick explanation. First, the html5 audio tag is placed on the page with the id="audioplayer". Next, some javascript runs that checks a few things and if any of them fail, it replaces the id="audioplayer" element with the fallback flash player. Of the things it checks, it checks that the browser can create the audio element (html5 supported), then it check that the browser can play a filetype of audio/mpeg (mp3). If any of these fail, it will go to flash. This works on all the browsers I have tested on, including firefox, but I make no guarantees. Just from code inspection, if the user has javascript disabled, it won't work. But I don't care. Who really wants to provide support for those (L)users anyway ;)

Hope it helps.

Was this page helpful for you? Buy me a slice of 🍕 to say thanks!