Matt Coneybeare

MC

Getting HTML5 Audio Tag and Flash Fallback to Work Nicely With All Browsers

| Comments

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.

Comments

My name is Matt Coneybeare, I design and develop for iOS (iPhone, iPad and iPod Touch), Mac OS X and the Web out of New York. In 2008 I started a software company called Urban Apps that has made some pretty popular apps such as Ambiance and Hourly News. My current Stack Overflow reputation is about 21k.

I was a Rockstar a decade ago, but then went back to school and collected a Bachelor's Degree in Computer Science from U.C. Berkeley. Now I am settled down with my beautiful wife Di and our three doggies Hamachi, Foxy and Millie. While coding, I walk at least 16 miles/day on my Treadmill Desk. When not at my desk, I love exploring New York City as a Yelp Elite.

Contact information

Name
Matt Coneybeare
Email
Website
Twitter
App.net
Instagram
GitHub
Wizpert
Google+