Matt Coneybeare


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.


My name is Matt Coneybeare, I design and develop for the web, iOS (iPhone, iPad and iPod Touch), and MacOS out of New York City. In 2008 I started a software company called Urban Apps that has made some pretty popular apps such as Ambiance and Hourly News. In 2019, I joined the team at Ticket Evolution as a Senior Software Engineer. My current Stack Overflow reputation is about 27k.

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 and a MBA from Quantic. Now I am settled down with my beautiful wife Di and our dog Hamachi. When not at my desk, I love exploring New York City as a Yelp Elite, or training for marathons.

Contact information

Matt Coneybeare