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:
- 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 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.
It run on my Nexus S(2.3.4).
Its’ awesome!
I use jq-1.6.1 and had to change line 67 from $player.remove(audio); to $player.empty(audio); but otherwise it works great.
if i would like to give IT a number of files to play and looping it with one button, how would I do it?
-
thanks,
baa.
In theory you could use multiple buttons and hide all but the button associated with the currently-playing track. I haven’t tested this in code but It could work like this:
Set all li.audioButton extcept the first-child to display:none
Listen for the onended event of the current track.
Hide the current button, display the next
Trigger a click on the next button via jQuery.trigger()
repeat the process until the you are done
Great stuff! Thanks!
FF5
I don’t see any issues in FF5 on Mac. What error do you get?
Works very fine on all browsers.
Only not on my iPhone 3G iOS 3.1.2
I love this – is there a control for autoplay when the page loads (i am only using one button)
@JMK – Just use jQuery.click() on your button to start playback.
This is exactly what I was looking for. It works on iOS and I was able to make my own button in photoshop, too. I had to make a small change… in the audiocontrol.js (line 113ish) I had to change the “#control” to “.controls” to use it in several different places on the page as a class instead of an ID.
Thanks so much for this,
Dennis
This is great!! I was looking for something like this as well only I was wondering if you knew if this would work with a shoutcast stream? I run an Internet Radio Station and I am building my mobile tune in page and I was hoping to find a universal way that people can tune in from(MOST)mobile phones without having to download an app and this might be the solution. I know the audio tag with a shoutcast stream as the source works on an iphone but not on an android so I was hoping this would work on BOTH..DO you know if it would Brian?? Thanks
I’m getting “There was an error loading this file” but I’m not entirely sure why. The paths to the audio files play just fine when loaded into a browser and I’m not getting any errors in the console.
After a little more testing it turns out only the browsers you wouldn’t expect are working for me!
IE9 and Safari on Mac & iOS devices!
FF5 and Chrome on both Mac & PC don’t work at all for me.
Found it. The Ogg files were corrupted!
Hi, great plugin !
But it does not work for me on my IPAD in Safari. I get a “There was an error loading this file” Error.
Can you help?
@Stephane – It works well in most cases on iPad/Safari Mobile. Check the path to your audio files.
Fewww you plugin is THE only one I was able to make work on android default browser + safari iPad / iPhone 4, very nice.
Just wondering : I suppose it’s using the flash fallback to work on android or am I mistaken ?
@Stephanie – Indeed, the plugin works on Android via the Flash fallback. For the the reasons why, check out this post about HTML5 support on Android.
Hi,
your plugin looks great!
once question, does it support .wav format?
regards
@rams – It doesn’t support .wav but you could easily modify the code to support other formats.
Tried it on my Android 2.2.1 and doesn’t work. The triangle in the play button becomes an exclamation mark, but no sound comes off.
Do I need to install a Flash plugin or something?
Yeah you need to have the Flash player installed. Get it from the Android Market.
Hi Brian – I just looked at the trumpet site on an Android and it’s not working. The player button is there but the music never plays. Should it be using the flash player?
Make sure Flash player installed and that media volume is turned up on your device.
Uhm… that’s ok for me but I’d rather not have to tell my users to install something before they can use my mobile web app.
Geez, I’m really getting hopeless about finding a good workaround for this whole Android audio tag bug.
Hi!
First of I must say it works vey good. Good job.
Secondly Im kind of new to javascript and Im trying to make it play onload on android devices but cant seem to figure out how.
Would really apriciate some help on this, thanks
Regards Tyr
Since the player uses jQuery, you could use jQuery to trigger a click on the button like this:
$(document).ready(function(){$('your button selector').click();
});
can i add a duration track in this plugin, if so can u help me in that.
Curious if there is a way to pause the player from another button other than trigger, like to call the pauseTrack function
ie
$(‘.mybutton’).click(function(){
pauseTrack
});
tried without luck a number of ways
@Steve – Pause track isn’t a ‘public’ function of the player so calling it the way you tried won’t work. The ‘right’ way to do this would be to expose a public pause function in the return of the plugin in order to pause the player from an external button. At the bottom of the plugin file after init() is called add something like this:
return {kill : function() {
pauseTrack();
}
}
Then in your HTML where you initialize the player, store a reference to the player as such:
var player = $(this).audiocontrol();Then you should be able to call player.kill() from anywhere within your page and stop the currently playing track. The quick-and-dirty option is to use jQuery to get the button element with the ‘playing’ class and trigger a click on that to pause the track:
$('.playing').click();Good luck.
Hey Brian, any idea why I’m getting the following error in IE8 and IE7 (Flash use):
“Unable to get value of the property ‘playFlash’: object is null or undefined. jquery.audiocontrol.js, line 92 character 5″
Ha, never mind. My path to the swfobject.js file was relative to the jquery.audiocontrol.js file and that was a mistake. Fixed.
Hi Brian, This script saved me a lot of headaches!
could it be a server setting preventing the file from being streamed? or maybe a codec/compression thing? I have tried mp3, m4a, and mp4 files with various compressions.
But I am having trouble getting audio to work on an ipad. It is selecting the audio correctly, but seems to error out each time with an error code of 4.
your example website works well on the ipad, but mine does not
Thnaks!
ak
@Aaron – Doubtful that it’s a server setting related to streaming since the files are being downloaded progressively instead of streaming. It could be related to the codec. In jquery.audiocontrol.js try changing
case "MP3":
fmt = 'audio/mpeg';
break;
to
case "MP3":
fmt = 'audio/mpeg; codecs="MP3"';
break;
If that doesn’t work, you may want to try some of the other MP3 codec types.
On the plus side, it works swimmingly on IE
@apd I added a progress bar to the playing track by adding a parameter to the listener object for timeupdate:
"timeupdate" : onProgress,then have an onProgress function like this:
function onProgress(){
var dur = this.duration;
var time = this.currentTime;
var fraction = time/dur;
var percent = (time/dur*100);
var new_width = ( $('#ssNav').width() * fraction;
$('#progress').css('width', new_width);
}
Hello Brian, Everyone… I’m receiving the error message “There was an error loading this file” ONLY in FF7 on my mac. It works perfectly in Chrome 14, and Safari 5 on my mac. Has anyone else come across this issue. My files couldn’t be corrupted since Chrome is playing everything with no problem… Here’s the url. http://truedezign.com/sterlingsimms/
Please help.
Hey nevermind… I guess it’s the .OGG files. This is not working on my iPod neither.
Thanks for reading anyway…
Ok, it’s just acting crazy now. It gives me the same loading file error on my iPod but right after the error it actually PLAYS the song… So now I’m back to square one. What is going on. I need help with this
@DannyDigital – Definitely some weirdness going on. Did you edit jquery.audiocontrol.js? It looks like media files are requested multiple times which may cause a problem.
Hi Brian,
Great tool. I am using it to play a piece of audio when the page loads. Using your suggested code:
var player = $(this).audiocontrol();$('.audioButton').click();
This works fine for automatic playing html5 audio, but the Flash gives me a nice !
This is only when the audio should play when the page loads. Clicking on the button is working fine in html5 and flash.
Any clue?
Thanks!
Gr,
Mark
@Mark – Perhaps Flash Player hasn’t initialized yet when you trigger the click. You should try passing a callbackFn to swfobject.embedSWF in jquery.audiocontrol.js. (see swfobject api docs). I’m not 100% sure this will solve your problem but it’s worth investigating. If it does, let me know so I can update the code.
Hey Brian,
Thanks for sharing this script! I tried using it in a project I’m currently working on, but unfortunately I am limited to playing only .m4a files from a remote server and I apparently don’t know enough about JavaScript to make it work. I managed to get safari to play the audio, but I don’t think the flash fallback is starting for me as every other browser displays the popup error. Any ideas as to what I may have done wrong?
Thanks!
-JohnS
@John – I assume that since you are locked into playing M4A that the files are on a different domain than your site. If that’s the case, you’re probably experiencing a crossdomain policy issue. It could also be that the M4A files are encrypted which likely won’t work either. For a more robust player that might solve your problems you should check out jPlayer.
Thanks for the quick reply. I actually have looked at jPlayer, but it seems to have problems playing the files also unless I’m in the Safari browser. I’ve been trying to get yours to work because I really like the simplicity, player size, and the way it’s coded better than jPlayer. The m4a files that I’m playing are off of Apple’s iTunes servers. (The same 30~90 second preview track you see in their store, if that helps)
Well, even if this doesn’t work for this project, I’m sure I can use this player in future ones. Thanks again!
-John
Hello, very nice player , thanks for sharing, one question, hope your answer,
do you know how to add this player to mysql, so like for example i want to have back from mysql:
artist – track – album- listen
me——mysong–myalbum-html5audioplayer
the audioplayer button as a result from the mysql consult, do you think it can be done?
thanks
@Adrian – Simply put, yes. However, the player itself can’t query a mysql database. You need something to query your db and render the properly-formed HTML tags that my player requires. PHP seems like a good option. It’s a pretty basic problem so finding a tutorial for querying a mysql db via php shouldn’t be difficult. Good luck!
Hello. I really like your player. I just have a little problem playing it in firefox. It works fine when I run it from my PC, but as soon as I uploaded it, it stopped working. Any idea? It works fine in IE, Chrome, Ipad… it´s just in firefox that wouldn´t work. Thank you!
@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.
Hi Brian,
Thanks so much for this, I’m using it in WordPress. I was hoping you could help me with a small Internet Explorer issue.
Is it possible to have the player work in IE when the page isn’t in the audio folder? (domain.com/music/album-name/). It works perfectly in all other browsers!
Thank you! (:
@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.
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.
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">This is a great little script. Thank you for sharing. It is working great for me in most browsers too. I am having some hiccups in IE (go figure) and was curious if anyone else came across a solution…
In IE9 that audio will play but the loading gif does not ever get removed. In IE8 the same thing happens, but in addition, the audio does not play.
Any help will be greatly appreciated!
Know when you’re stuck on an issue and you post online for help, and within a few minutes you fix it? Yeah, that’s the way my day is going.
Anyway, fixed the IE issues I was having. Seems that there was something wrong with the swfobject.js file. Replaced it and life is good.
Thanks again for the great script!
Hi, love the code but have a strange issue i cant see above – client of mine will be uploading MP3′s but I cant see to get them to work – ‘Error loading file etc’ only the OGG files run without issue. Paths are fine etc and tested fine with the OGG’s present, remove them so we use the MP3 instead and it gives the file error.
Site Link
I get an error message (‘There was an error loading this file.’) when using the Flash player.
audio.playFlash is not a function (line 92)(
audio.playFlash(currentTrack + defaults.defaultMediaExtension);)
Any ideas what’s wrong?
I googled a bit and find out that it may be a problem with adobe security. I’ve added local swf folder path to: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html
But it still not working:( No I’ve got:
Error: uncaught exception: Error in Actionscript. Use a try/catch block to find error.
Brian, thanks for the great code. When I set it up exactly as per the download example (with jQuery1.7.1), I need to click the audio link 3x to get it working on the iPhone/Safari mobile. The ‘!’ icon displays for the first two clicks, than the audio plays on the third click. It works perfectly on Chrome, FF, Safari, etc. Any chance you could check why this might be happening?
Many Thanks!
Hi Brian. I’d like to echo many other people’s praise for your player, which seems excellent. However, I seem to have the same problem as David on March 12. In Firefox (latest version) MP3 files don’t play. OGG files do, but I assume they’re using HTM5, and in any case my client won’t be able to use OGG files. In other words, Flash doesn’t seem to be working for me. MP3 files work fine in IE9 and Chrome.
I’ve only tested this on localhost, as I don’t have a live web site up yet for this client. Maybe there are Flash security issues, but other Flash applications (e.g. Flowplayer) seem to run normally in Firefox on my localhost.
I’m willing to bet I’ve forgotten something glaringly obvious, but after trying for ages to crack this (with limited technical ability) I’m floundering! Grateful for any pointers.
This is the type player I was looking to play songs clips. Unfortunately your demo page does not paly clips on an iPad, showing only the “!”. Any suggestions?
@Paul – There was a bug in the code. Audio should play on iPad now.
Is there supporting files required to play swf files? I modified your demo page with only a swf file. The song clip does not play. You may see the page at http://www.patatechnologies.com/audio/ Cant SWF. The swf file palys fine in the browser http://www.patatechnologies.com/audio/media/cantswf.swf
@Paul – The player wasn’t designed to play SWF or FLV – only formats that modern browsers can play natively (MP3, OGG, WAV, etc.). If this feature is requested by enough users I may add it in a future version.
Hi Brian, I must say this is a really awesome player, but I’m having a bit of trouble with getting this to work within WordPress. I have successfully installed this in wordpress and it’s working with all browsers except IE8. I ran your demo in IE8 and it does work. But within wordpress it flashes the button and title and disappears in less than a second. I got it to stop flashing by renaming the id=”ubaPlayer” to id=”ubaPlayerx”. But it doesn’t work. Amazingly it even when I rename the id it still works in other browsers…lol. Any idea why it appears/disappears within IE8?
Hi Brian, just to let you know that I got it working. Had to take the & out of tag (not sure why I did that, since you didn’t…but that caused it to disappear). Also, I had to go into jquery.ubaplayer-1.0.0.min.js and I hardcoded the paths (in 3 spots) where it’s looking for the SWF player. Now it’s working just fine in IE8!
Following up my post on March 28, I still love the player, but my own experience seems to be going from bad to worse! I thought I was getting MP3 files to play in IE9 and Chrome on my localhost system, but now they only work in IE9 (not Firefox or Chrome). It works when I place equivalent OGG files on the server, but not when I remove them, so I’m guessing that the Flash component is not working. Other Flash apps work fine for me in the same localhost setup.
I tried typing absolute paths into the ubaplayer JS file, as Chris suggested, but that didn’t help. Does anyone have any other clues please?
Hi, great little player you’ve made here. I love it’s simplicity!
One question though… If I just wanted a file to auto play as soon as the page is loaded, how would I accomplish that?
Any help would be great, thanks!
@Dustin – Take a look at this example: http://jsfiddle.net/hYpSH/1/. Use
$("#ubaPlayer").ubaPlayer({autoPlay: $('.audioButton').eq(0)});to play the first audio button on your page.Please let me know if i can auto play, a certain file?
Urgent!!
In Firefox (latest version) MP3 files don’t play, OGG files do.Flash fallback does not work. Please suggest solution
@findukurdu & @asacan – You should instantiate the player as such:
$(function(){$("#ubaPlayer").ubaPlayer({codecs: [{name:"MP3", codec: 'audio/mpeg'}]});
});
It seems to be working on everything buy the Droid. Are there any patches for that? Thanks!!
@jennyooooo – Which version of Droid/Android OS?
I’s the Droid Razr and it’s not the newest OS because it’s a Verizon. So it’s probably 2.3.6.
Thanks!!
Oh wait wait Droid 2!
hi Brian, just had to say thanks! Using this for a new website I’m building and it’s perfect. Been looking for a little button like this for a while, cheers dude!
First off this is amazing!
Another question tho. I want to use two music buttons but I want them to look different.
I want the first one to play automatically when the page loads, which it does. But the second button doesn’t play when I hit play.
I wrote a separate CSS for the different looks of the buttons (just so it’s less confusing to me).
I think this is my downfall:
$(function(){
//basic config
$(“#ubaPlayer”).ubaPlayer({autoPlay: $(‘.audioButton’).eq(0)});
$(“#ubaPlayerBags”).ubaPlayerBags({autoPlay: $(‘.false’).eq(0)});
});
Any thoughts?
Thanks a million!
@jennyooooo – You can only create one player per page and that single player will handle playback for all buttons. If you want to apply a unique style to each button your JavaScript should look like this:
$(function(){//basic config
$(“#ubaPlayer”).ubaPlayer({autoPlay: $(‘.audioButton’).eq(0)});});
And your HTML should look something like this:
<div id="ubaPlayer"></div>
<ul class="controls">
<li class="audioButton myFirstStyle" href="media/FiftyYears">Fifty Years</li>
<li class="audioButton mySecondStyle" href="media/AwMan">Aw Man</li>
</ul>
And your css like this:
.myFirstStyle{ /* style for your first button */}.mySecondStyle{ /* style for your second button */}
Good luck.
Hi! Can you do support IE 6,7,8 and wav file ? =)
Nice player, a wordpress plugin one would be awesome!
Doesn´t work with Phonegap…
Not good for app development for the moment.
Any ideas?
Can we give the direct url for the link insted of the relative url
EX: Fifty Years
when I give this link its try to open/download the file instead of playing it
when i disable flash player it does not let play as html5 audio tag but start providing download mp3.
how i an use it like.
1). if browser support and canplay audio html5 tag then use it
if not
2). use flash player to play the audio
if not
3). provide download link for the audio direct to user
for more information i am using firefox 14+ PC version
Brian
Great player. One question. Is it possible to add a listener for the progress, so the page can show a play progress indicator?
Thank you.
Hi Brian,
Any chance to stram a shoutcast? I mean, a .pls file from the server?
Thanks,
Valo
Excelent Job mate, I used your code on this site,left copyright untouched. Great work thanks. Check it here
http://www.sebastianyepes.com
Brilliant! Nice work. Do you think there is any way of making it work with an MP3 link that is a shoutcast or similar radio stream?
@Nick – I believe it is possible to use ubaPlayer with Shoutcast though I haven’t tested it.
Thanks Brian I will take a look. Playing an icecast/Shoutcast stream with a .mp3 ending (or .m3u) is proving to be a bit of a nightmare on Android! Most players seem to recognise the file is there but not play it.
Hi,
Wow, very nice work! I found your site looking how to play sample audio files. QUESTION: Does your audio player play samples of songs? For example, if a song is 1:28, can it play ONLY the first 0:30 of that song?
Thank you
Hi
I think the Flash Fallback does not work in Firefox anymore. Even your Demo Page http://www.brianhadaway.com/audio/oneButtonAudioPlayer.html does not work. I am using Firefox 16.
Any thoughts? Thank you.
Hello Brian,
I wonder if we can include in/or use this player with shoutcast/icecast streaming too ?
for example instead of music.mp3 file in src ->
http://ip:8088/ for shoutcast
and http://ip:8000/stream for icecast ?
Hi , I`am trying to get the plugin to start playing on page load , here is my code –
var $music = jQuery.noConflict();
$music(document).ready(function(){
$music(“.audioButton”).click();
$music(“#ubaPlayer”).ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}]
});
});
thanks in advance
@Lee – You’re trigging the click on the audio button before ubaPlayer has initialized. However, there’s no need to call
$music('.audioButton').click();because ubaPlayer will autoplay via config. So your code should look something like this:var $music = jQuery.noConflict();
$music(document).ready(function(){
$music(“#ubaPlayer”).ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}],
autoPlay: $(‘.audioButton’).eq(0)
});
});
Which code should i edit to add autoplay to my player ?
Should this code from head section be changed ? :
$(function(){
$(“#ubaPlayer”).ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}]
});
});
or ?
I tried every solution but nothing works :S
Hi
You got a good player. works great.
I need a liitle modification.
I like to call your player with a mp3 song like this.
playmp3(url: song.mp3). Is this feasible.
The behavior (http://www.brianhadaway.com/audio/oneButtonAudioPlayer.html) is different in Firefox 20.0.1.. Some update…
im looking for a player that works on all browser iphone androids tablets, that stay playing even when you change pages on your website, because when i change a page the music stops and i have to press play again
can you help me with this.
must be able to play my srteam url non stop.