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.
64 Comments
What a great little player! Just one thing…
Like Mark above, I get an error message (‘There was an error loading this file.’) when using the Flash player and making the track autoplay with:
$(document).ready(function(){
$(this).audiocontrol();
$(‘.audioButton’).click();
});
Any tips for using callbackFn or another method to wait until the Flash player is loaded? Sorry, not the greatest coder…
Thanks!
@Caroline – In jquery.audiocontrol.js find the following code…
swfobject.embedSWF(options.flashAudioPlayerPath, options.playerContainer, "0", "0", "9.0.0", "swf/expressInstall.swf", false, false, {id:options.flashObjectID});and replace with something like this…
swfobject.embedSWF(options.flashAudioPlayerPath, options.playerContainer, "0", "0", "9.0.0", "swf/expressInstall.swf", false, false, {id:options.flashObjectID}, myCallbackFunction);Then you’ll need to define
myCallbackFunctionin jquery.audiocontrol.js like this…function myCallbackFunction(){$('.audioButton').click();
}
I wrote this without testing so let me know if it doesn’t work.
@Rob – Yes you should be able to point the href attribute of each li element to the load music from any folder. However I’m not sure why this is only a problem in IE.
@Esteban – Do you get any error messages in FireFox? If you have a Firebug installed you should be able to debug the error in the console.
Brian .
You use addListeners function i understand why you did that ,and this is due to flash .
But the add addListeners function is not been support under ie9 this is why you get problem in IE,you need to find other way`s doing things and not use addListeners with the js .
Brain, I fixed my on/off-save issue using JQuery cookies.
Nice!
Thank you, I have been looking for something like this for long time!
Hi Brian,
This is a nice one.
But how about IE8, there is an error message related to the .js
Kirk
Really nice. Been looking everywhere for this sort of player. Love it! I would play for this!
Is there a way to loop the playback?
@Jefferson – You can use the
loopattribute of the HTML5audiotag. In jquery.audiocontrol.js Find the following line:audio = new Audio('');Immediately after it add:
audio.loop = "loop"That should do it.
This button is perfect for us! But… it doesn’t work in dynamicaly-built content. Can you tell me why my buttons don’t play? I can’t see why… paths seem right, and the css works. Could it be that my buttons are each in their own ul, with multiple ul’s on the page? Does the javascript look for certain parent elements? –> http://www.gmbc.org/sub/new_messages.php
@Jamey – Add the class of ‘controls’ to all your
ulelements and it should solve the problem. So yourulelements should look like this:<ul id="control-3" class="controls">