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:
- Convert the entire Ambiance library to ogg just for firefox users.
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" 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
(L)users anyway ;)
Hope it helps.
Was this page helpful for you? Buy me a slice of 🍕 to say thanks!