UPDATE: If you want to use this with jQuery 1.7.1 you’ll need to change the following line in jquery.audiocontrol.js:
$player.remove(audio)
with
$player.remove("audio")
Thanks to Benjamin Desmarez at Guitar-Pro.com calling this bug to my attention.
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:
- Firefox 3.6 – Mac/PC
- Safari 5 – Mac
- Chrome 10 – Mac
- Internet Explorer 7+ – PC
- Firefox 4 – T-Mobile G2 (Android 2.2)
- Opera Mobile 11 – T-Mobile G2 (Android 2.2)
- Default Browser – T-Mobile G2 (Android 2.2)
- 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 or fork it on github 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.
Update: If you want to see an example of the audio player in the wild check out TrumpetMoments.com. Dennis did a great job customizing the button to use on his site.
OGG Files Causing Errors in HTML5 Audio Player in Firefox
About a year ago I created an HTML5 Audio Player with Flash Fallback that several developers have used in their sites. It’s not the most robust player, but what it lacks in features it makes up for in simplicity. It plays audio files natively in modern browsers and uses a simple Flash player to backfill audio tag functionality in antiquated browsers. The UI is styled with CSS regardless of whether the browser plays audio natively or via Flash and implementing the plugin is simple enough for novice developers.
Given the simplicity of the player, I was surprised when I recently received an email from someone asking me to help determine why my HTML5 Audio Player wouldn’t work for him in Firefox. He had seemingly configured everything correctly and the player worked in every other popular browser, but he still couldn’t get the player to work in Firefox. As it turns out most servers (including those used by GoDaddy) by default don’t serve the appropriate MIME Types for OGG files. That being the case, you’ll need set the appropriate MIME Types for OGG files if you want HTML5 audio players to work correctly in Firefox. So for an Apache server, you would need to add the following to your .htaccess file:
AddType audio/ogg .ogaAddType video/ogg .ogv
AddType application/ogg .ogg
Evidently, other browsers will guess the MIME Type based on file extension if a MIME Type isn’t served. I had just been lucky that all the servers I used up until this point were already configured to serve the right MIME Types.
If you want more info about this, check this page on the Mozilla Developer Network.