HTML5 Audio Player with Flash Fallback

Posted by & filed under Labs.

UPDATE: For info on my HTML5 Audio Player with Flash Fallback (UbaPlayer) visit the project page on GitHub.

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.

119 Responses to “HTML5 Audio Player with Flash Fallback”

  1. elle

    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.

  2. baa

    if i would like to give IT a number of files to play and looping it with one button, how would I do it?


    • Brian

      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

  3. Johan

    Works very fine on all browsers.
    Only not on my iPhone 3G iOS 3.1.2

  4. JMK

    I love this – is there a control for autoplay when the page loads (i am only using one button)

  5. Dennis

    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,

  6. Papo (TM101 Radio)

    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

  7. Kelsey

    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.

  8. Kelsey

    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.

  9. Stephane

    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?

    • Brian

      @Stephane – It works well in most cases on iPad/Safari Mobile. Check the path to your audio files.

  10. Stéphanie

    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 ?

  11. rams


    your plugin looks great!

    once question, does it support .wav format?


    • Brian

      @rams – It doesn’t support .wav but you could easily modify the code to support other formats.

  12. Marcos

    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?

  13. Carol

    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?

  14. Marcos

    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.

  15. Tyr708

    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

    • Brian

      Since the player uses jQuery, you could use jQuery to trigger a click on the button like this:

      $('your button selector').click();

  16. Steve

    Curious if there is a way to pause the player from another button other than trigger, like to call the pauseTrack function


    tried without luck a number of ways

    • Brian

      @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() {

      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:


      Good luck.

  17. Marc

    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″

  18. Marc

    Ha, never mind. My path to the swfobject.js file was relative to the jquery.audiocontrol.js file and that was a mistake. Fixed.

  19. Aaron

    Hi Brian, This script saved me a lot of headaches!
    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 :( 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.


    • Brian

      @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';


      case "MP3":
      fmt = 'audio/mpeg; codecs="MP3"';

      If that doesn’t work, you may want to try some of the other MP3 codec types.

  20. Aaron

    @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);

  21. DannyDigital

    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.

    Please help. :-)

  22. DannyDigital

    Hey nevermind… I guess it’s the .OGG files. This is not working on my iPod neither.

    Thanks for reading anyway…

  23. DannyDigital

    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

    • Brian

      @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.

  24. Mark

    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();

    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?


    • Brian

      @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.

  25. John

    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?


    • Brian

      @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.

  26. John

    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!


  27. Adrian

    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

    the audioplayer button as a result from the mysql consult, do you think it can be done?

    • Brian

      @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!

  28. Esteban

    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!

    • Brian

      @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.

  29. Rob

    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? ( It works perfectly in all other browsers!

    Thank you! (:

    • Brian

      @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.

  30. Caroline

    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:


    Any tips for using callbackFn or another method to wait until the Flash player is loaded? Sorry, not the greatest coder…


    • Brian

      @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 myCallbackFunction in jquery.audiocontrol.js like this…
      function myCallbackFunction(){

      I wrote this without testing so let me know if it doesn’t work.

  31. Brian

    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 .

  32. Abdulmohsen

    Thank you, I have been looking for something like this for long time! :)

  33. Kirk

    Hi Brian,

    This is a nice one.

    But how about IE8, there is an error message related to the .js


  34. Bernie C

    Really nice. Been looking everywhere for this sort of player. Love it! I would play for this!

    • Brian

      @Jefferson – You can use the loop attribute of the HTML5 audio tag. In jquery.audiocontrol.js Find the following line:
      audio = new Audio('');
      Immediately after it add:
      audio.loop = "loop"
      That should do it.

  35. Jamey

    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? –>

    • Brian

      @Jamey – Add the class of ‘controls’ to all your ul elements and it should solve the problem. So your ul elements should look like this:
      <ul id="control-3" class="controls">

  36. Chris

    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!

  37. Chris

    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!

  38. David

    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

  39. Ambi

    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?

  40. George

    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!

  41. Peter

    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.

  42. Paul Friedman

    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?

    • Brian

      @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.

  43. Chris

    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?

  44. Chris

    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!

    • Mike

      On IE8 the player keeps disappearing after a second.. I tried the solutions found on this page, but no success : (

  45. Peter

    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?

  46. Dustin

    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!

  47. asacan

    In Firefox (latest version) MP3 files don’t play, OGG files do.Flash fallback does not work. Please suggest solution

    • Brian

      @findukurdu & @asacan – You should instantiate the player as such:

      $("#ubaPlayer").ubaPlayer({codecs: [{name:"MP3", codec: 'audio/mpeg'}]});

  48. jennyooooo

    It seems to be working on everything buy the Droid. Are there any patches for that? Thanks!!

  49. jennyooooo

    I’s the Droid Razr and it’s not the newest OS because it’s a Verizon. So it’s probably 2.3.6.

  50. jamie mcclennan

    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! :)

  51. jennyooooo

    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:

    //basic config
    $(“#ubaPlayer”).ubaPlayer({autoPlay: $(‘.audioButton’).eq(0)});
    $(“#ubaPlayerBags”).ubaPlayerBags({autoPlay: $(‘.false’).eq(0)});

    Any thoughts?
    Thanks a million!

    • Brian

      @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:
      //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>

      And your css like this:
      .myFirstStyle{ /* style for your first button */}
      .mySecondStyle{ /* style for your second button */}

      Good luck.

  52. Nicolas

    Doesn´t work with Phonegap…
    Not good for app development for the moment.
    Any ideas?

  53. Randima

    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

  54. satish

    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

  55. Leo


    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.

  56. Vali

    Hi Brian,

    Any chance to stram a shoutcast? I mean, a .pls file from the server?


  57. Nick

    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

        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.



    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

    • Lee

      Hi , I`am trying to get the plugin to start playing on page load , here is my code –

      var $music = jQuery.noConflict();
      codecs: [{name:"MP3", codec: 'audio/mpeg;'}]

      thanks in advance ;-)

      • Brian Hadaway

        @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();
        codecs: [{name:"MP3", codec: 'audio/mpeg;'}],
        autoPlay: $(‘.audioButton’).eq(0)

  59. Elvedin

    Which code should i edit to add autoplay to my player ?

    Should this code from head section be changed ? :


    codecs: [{name:"MP3", codec: 'audio/mpeg;'}]

    or ?

    I tried every solution but nothing works :S

  60. mark

    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.

  61. chris

    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.

  62. Ricardo

    great,,great,,great.. thanks for this simple script…I just need little help to modify the codecs to play “m4a”, “mp4″.
    mp3 is working fine, but when I link to an m4a file it doesn’t work..the codec say ‘audio/mpeg’, and do I have to add m4a here and in the html script?…Thank you so much…

  63. Ricardo

    Hi, I just upgraded to the latest firefox and now it open the link in a new window.
    And, Opera download the song instead of playing it…Any advise or solution on this?
    Thank you…

  64. Lakshmikanth

    Hi everyone,

    This is just a great plug-in. I could able to run this in all browsers thanks for this awesome plugin. But when i run this in IE8 the native player is invoked and mp3 is playing in Windows media player. How can i make this work without using Media player???

    Plz help needed urgently….

  65. Bill Schultz

    Can you please tell me how to properly distribute the files and folders so the files will all be located?
    Also is it possible to use this button without the text?
    If I remove the text, the bottom of the button gets buried
    I have been using wimpy buttons and just paste the code to objects on a page.
    I can make it all work within your folder altering your index file, but I need to use it in a very precise way.
    If you take a look at my website, you will see the buttons I need to replace.
    Thank you for your help