Brian Hadaway

UPDATE (Mar 17, 2012): I recently rewrote jquery.audiocontrol.js as a new plugin, UbaPlayer, which includes many features requested by users over the past year. UbaPlayer is conceptually similar to the old player but more flexible. Keep this in mind as you read the comments below – they may not apply to ubaPlayer.

I wanted to create a simple one-button audio player using HTML5 that would be suitable for playing samples of audio tracks. This one-button player would toggle between play, pause and loading states and would stop playing the current track when another instance of the button is clicked. Naturally, I would want to include a Flash fallback for browsers that don’t support HTML5 audio playback. I also wanted to use HTML/CSS to style a single set of controls that serve as the UI for both the HTML5 and Flash versions of the player.

What resulted from this exercise was a jQuery audiocontrol plugin that controls playback and an “invisible” Flash audio player that emulates the HTML5 <audio> element. The control lacks some necessary features such as support for playlists and “bundled” playback. This would allow users to listen to a group of tracks without continually clicking play. Also, there is currently no publicly-exposed method to kill audio playback from outside the control. This is also my first jQuery plugin so there’s probably some improvement to be made in that code. But it’s still a good basic HTML5 audio player with Flash fallback that allows you to style the buttons with CSS regardless of whether the audio is playing natively in the browser or in the Flash plugin.

The code is tested to work in the following browsers:

1. Firefox 3.6 – Mac/PC
2. Safari 5 – Mac
3. Chrome 10 – Mac
4. Internet Explorer 7+ – PC
5. Firefox 4 – T-Mobile G2 (Android 2.2)
6. Opera Mobile 11 – T-Mobile G2 (Android 2.2)
7. Default Browser – T-Mobile G2 (Android 2.2)
8. Safari Mobile – iPad and iPod Touch (iOS)

Take a look at a demo of my HTML5 audio player with Flash fallback here. Feel free to download the source and use it however you like. You’ll find some documentation in the jQuery plugin or you can hit me up with a comment or email if you have questions about how to customize this to your needs.