UPDATE: For info on my HTML5 Audio Player with Flash Fallback (UbaPlayer) visit the project page on GitHub. This page references deprecated code and uses outdated examples. I’m no longer responding to comments left here.
I received a lot of questions and feedback about my HTML5 Audio Player with Flash Fallback, so I decided to rewrite it to fix some bugs and add some of the most requested features and call it UbaPlayer. This is a full rewrite of my previous jquery.audiocontrol.js. If you’re still using jquery.audiocontrol.js, STOP and update to ubaPlayer now.
UbaPlayer is tested to work in the following browsers:
Mac (Chrome 10+, Safari 4+, Firefox 3.5+, Opera)
PC (Chrome 10+, Safari 4+, Firefox3.5+, Opera, IE6+)
iOS 3+ (Safari Mobile)
Android 2.2+ (Chrome, Firefox 4, Opera 11)
Since UbaPlayer is a simple player, it only supports two codecs by default – OGG and MP3. These two formats are all you really need to play audio natively in modern browsers and via Flash in antiquated browsers. If you need to transcode audio it’s quick an painless if you have the right tool. Audacity is a good free tool for Mac (I’m not aware of a tool for PC.) If the task of transcoding audio seems daunting, you may want to reconsider whether you have the technical aptitude to be a web developer. If you want to add support for other codecs read on and I’ll show you how.
Fork or Download UbaPlayer and place the contents of the deploy directory in your web server. Launch ubaplayer.html in your browser of choice. Verify that the demo works before making any customizations to the code.
UbaPlayer requires at least one
<ul> with a class of ‘controls’ that contains one or more
<li> with the class of ‘audioButton’ and an href attribute with the path of the corresponding media file (with no file extension). In the example file, the markup looks like this:
UbaPlayer can be instantiated on any DOM element. I’ll instantiate the div with the id of ‘ubaPlayer’ in the markup above like this:
At this point UbaPlayer has been instantiated and is ready to play. But what if you want to configure UbaPlayer? Below are some simple configurations:
Just pass the element that corresponds to the audio you want to play.
Auto Play example
Set Codec Preferences/Add Additional Codecs
UbaPlayer supports OGG and MP3 by default. You can add additional codecs or set the order of preference as such:
If UbaPlayer is unable to play any provided codecs natively, it uses Flash to play. The following code with tell UbaPlayer to attempt to play MP3 files natively then use Flash instead of attempting to play OGG files.
If you want to provide a way for users to control playback outside of the single button, you can provide external controls. The code below assumes you have a button in the DOM that toggles playback of the current track.