UbaPlayer – The jQuery HTML5 Audio Player with Flash Fallback

Posted by & filed under Front-End Development.

UPDATE: For info on my HTML5 Audio Player with Flash Fallback (UbaPlayer) visit the project page on GitHub. This page references deprecated code and uses outdated examples. I’m no longer responding to comments left here.

I received a lot of questions and feedback about my HTML5 Audio Player with Flash Fallback, so I decided to rewrite it to fix some bugs and add some of the most requested features and call it UbaPlayer. This is a full rewrite of my previous jquery.audiocontrol.js. If you’re still using jquery.audiocontrol.js, STOP and update to ubaPlayer now.

UbaPlayer is free and open source (GPL/MIT). Download UbaPlayer 1.0.0.

Live Examples

0800 Studio
Listen and Read Along (a tool for studying English as a foreign language)
MySongbook.com
TrumpetMoments.com
LoveAurell.com

Browser Compatibility

UbaPlayer is tested to work in the following browsers:
Mac (Chrome 10+, Safari 4+, Firefox 3.5+, Opera)
PC (Chrome 10+, Safari 4+, Firefox3.5+, Opera, IE6+)
iOS 3+ (Safari Mobile)
Android 2.2+ (Chrome, Firefox 4, Opera 11)

Audio Formats

Since UbaPlayer is a simple player, it only supports two codecs by default – OGG and MP3. These two formats are all you really need to play audio natively in modern browsers and via Flash in antiquated browsers. If you need to transcode audio it’s quick an painless if you have the right tool. Audacity is a good free tool for Mac (I’m not aware of a tool for PC.) If the task of transcoding audio seems daunting, you may want to reconsider whether you have the technical aptitude to be a web developer. If you want to add support for other codecs read on and I’ll show you how.

Basic Usage

Fork or Download UbaPlayer and place the contents of the deploy directory in your web server. Launch ubaplayer.html in your browser of choice. Verify that the demo works before making any customizations to the code.

UbaPlayer requires at least one <ul> with a class of ‘controls’ that contains one or more <li> with the class of ‘audioButton’ and an href attribute with the path of the corresponding media file (with no file extension). In the example file, the markup looks like this:

UbaPlayer can be instantiated on any DOM element. I’ll instantiate the div with the id of ‘ubaPlayer’ in the markup above like this:

At this point UbaPlayer has been instantiated and is ready to play. But what if you want to configure UbaPlayer? Below are some simple configurations:

Setting Volume
Note that setting the volume only works on desktop devices. Media volume on mobile devices is managed by the user and can’t be set via JavaScript.

Auto Play
Just pass the element that corresponds to the audio you want to play.

Auto Play example

Set Codec Preferences/Add Additional Codecs
UbaPlayer supports OGG and MP3 by default. You can add additional codecs or set the order of preference as such:

Limit Codecs
If UbaPlayer is unable to play any provided codecs natively, it uses Flash to play. The following code with tell UbaPlayer to attempt to play MP3 files natively then use Flash instead of attempting to play OGG files.

External Controls
If you want to provide a way for users to control playback outside of the single button, you can provide external controls. The code below assumes you have a button in the DOM that toggles playback of the current track.

Download UbaPlayer – The jQuery HTML5 Audio Player with Flash Fallback

95 Responses to “UbaPlayer – The jQuery HTML5 Audio Player with Flash Fallback”

  1. Stefan

    Great Job! Is there any chance to have more than one player on the site and start each player by javascript?

  2. Ralf

    If autoplay is true and flash is used, the sound isn’t stopped instead the same audio is started again

    • Brian

      @Ralf – I wasn’t able to reproduce this behavior. Can you provide a link to the page where you get this error?

  3. Matthias

    Hello Brian, first nice job :-) but…..
    I try to handle more player button on one page managed by radio buttons. e.g. when a radio button is checked the specific href in the player button next to it should take a variable and play on push to it.
    radio 1 checked = play 1 else 0
    radio 2 checked = play 2 else 0 and so on.
    my problem is that I can put nothing in your href than a file link without type!!
    Any idea how to handle that?

    • Brian

      @Matthias – I’m not sure I follow what you are trying to do. I think you simply need to update the href attribute to the appropriate source when the radio button. Let me know if you need me to show you how.

    • Brian

      @Curtis,

      Yes. I just updated the source to allow you to specify which extension to use for the Flash fallback. Get the latest source then initialize the player like this:
      $("#ubaPlayer").ubaPlayer({flashExtension: '.m4a', codecs: [{name:"M4A", codec: 'audio/mp4; codecs="mp4a.40.2"'}]});

  4. Dustin

    Hi Brian,

    Thanks for the help on autoplay. It works perfectly now! Only trouble now is that when I setup autoplay, the Flash fallback doesn’t seem to work in IE (IE8).

    I tried it on your example page ( http://jsfiddle.net/hYpSH/1/ ) and I get the same error. It doesn’t autoplay and when I manually click to play it has the “!” icon with no audio.

    Any ideas?

    • Brian

      @Dustin – I think that bug is caused by jsfiddle. Try this demo. I tested it in all IE7+ and it works for me.

  5. Thomas

    Hello Brian,

    thanks for the player, it’s awesome!

    I also tested the player with this demo in IE6 and it works, too! Just so you can add it to the supported browsers list :-)

    Keep up the great work!

    - Thomas

  6. Oliver

    Thank you Brian. I’ve been searching and searching and this is exactly what I’ve been looking for! Are you able to create a joomla plugin?

  7. Ashok

    Hi Brian,
    thanx for the player………I’m facing the problem in iPhone, Autoplay is not working in iOS 5…………. can u please fix this…..regards
    - Ashok

  8. findukurdu

    I want to use UbaPlayer as to attempt to play MP3 files natively then use Flash instead of attempting to play OGG files using the code in limit codec section, but it gives
    “audio.playFlash is not a function” error in Firefox 12.0

  9. Glenn

    Hey Brian,
    Amazing player! One question: can you use the HTML 5 preload command somehow? I’m using it on two big files (10MB – ok, not THAT big) and I’d love for them to play right away.
    Thanks so much, and awesome work!

    Glenn

    • Brian

      @Glenn – I’m not sure how that would work. You might want to try adding audio.preload = 'preload'; near line 50 of jquery.ubaplayer-1.0.0.src.js.

  10. David Gill

    Hey Brian. Thank you for your work.

    I’ve got all of the markup in place and the button showing up where I want it to. Jquery is loaded and the script is in place. However, when I press the button – the mp3 file doesn’t play.

    I’m wondering if this is because I’m referencing the file on my local file system, like:

    file:///Users/******/Desktop/module/img-aud/alarmring.mp3

    Any ideas?

    • Brian

      @David – You should run the code locally on a web server. Check out MAMP or WAMP if you don’t already have one. Include OGG files too unless you initialize the player with a custom configuration that defines MP3 as the only codec.

  11. David Gill

    Hey Brian – thank I got it working on MAMP and subsequently on the live server, well almost

    It works in Firefox ( on Mac ), Chrome ( on Mac ) and IE8 on PC

    It doesn’t work in Safari 5.1.5

    This is weird to me because Chrome is WebKit also….

    any ideas on why ?

  12. Stevo Kecman

    Thank you Brian… this is I believe what I was looking for. I tested it, and it works fine on my new website. I will send you its url, when I finish it, in a few days. I only have one questions:

    1. Can I somehow integrate auto-play option, so – for example, if I have 4 songs,and when a user come to website, autoplay of the first song automatically starts (and I can do that), and when the first song is over, I want second song to start autoplay…. when the second is over, I want third to start to play…. How can I do that? :D

    • Brian

      @Stevo – Pass the continuous option in the config object like this:
      $("#ubaPlayer").ubaPlayer({continuous: true, autoPlay: $('.audioButton').eq(0)});
      Note that this won’t work on iOS devices since media playback must be initiated by the user.

  13. Ashok

    Hi brain,

    I’m using this plugin for one of my site, I have 4 audios -

    which will be played when ever i trigger it in jQuery for certain time -

    $(“.check1″).delay(100, “myQueue”).queue(“myQueue”, function(){
    $(“#ubaPlayer”).ubaPlayer({
    autoPlay: $(‘.audioButton’).eq(2)
    });
    }).dequeue(“myQueue”);

    $(“.check2″).delay(6000, “myQueue”).queue(“myQueue”, function(){
    $(“#ubaPlayer”).ubaPlayer({
    autoPlay: $(‘.audioButton’).eq(3)
    });
    }).dequeue(“myQueue”);

    My problem is that first audio might be longer(or takes longtime due to low broadband speed) than the time I specify to trigger second audio……

    Is their any way to find the event of stop of audio file or audio playing ended event so on that event I can call second audio ……

    continuous: true option won’t work in my case as I need to trigger audios at certain time levels…..help please……..

    Thanx in advance
    - Ashok

  14. TS

    Brian, thank you very much for sharing this — exactly what I’ve been looking for. Works great for me. You’re a generous man!

  15. Mark

    Was what I was looking for but try as I might I could not get the functionality you show in your example. For me I’d get the button but pressing it would take me to the song link as if I’d made a normal link out of it.

    I was trying to use it within a table. I even tried but still no luck.

    • Brian

      @Mark – I updated the example because they were out of sync with recent changes to the code. Try again and you might have better luck!

  16. Mark

    Hi Brian, Ok that got it going for me! Thanks so much!

    I also realized when I was working with it yesterday I did not have my list defined as “controls” that was probably a big part of the problem.

    I have one question… To make this ideal, for my site, when a user presses on one of the buttons I’d love to be able to count that “play” for the specific song. I want to use it to compute a popularity value. Is there someway to do this?

    Thanks again for this! Great tool!

  17. Nikos

    Hello Brian and thank you for the great work! :) Although, flash fallback doesn’t seem to be working (at least on explorer 8 that I tested it)…even in the demos here I can’t play the files, when I click on a play button the mp3 file is opens with windows media player!

    • Brian Hadaway

      @Nikos – Do you have Flash disabled or are you running an ad blocker? The behavior you described typically occurs when the Flash fallback fails to load.

  18. Travis

    Brian, I can’t thank you enough for creating this great player. Spent hours upon hours looking for something like this. Astonishing how many unnecessarily complex and flash based monstrosities there are out there. This is fantastic. Thank you and my musician buddy thanks you as well!

  19. Mathias

    Hi, nice player.

    I’ve tried to play stream and file (MP3) on both devices iOS 5.1 and Android 2.3
    http://www.pagesvues.com/lesinfos/uba/

    On IOS 5.1 both played well.
    On Android 2.3 the MP3 file is ok, but the stream don’t play.

    Any idea ? Is there a cross-domain issue ?

  20. Angel

    Hi Mathias, I speak spanish but i tray to help you.

    Yo uso streaming en mi página web asi:

    href=”http://vmlive.tv:8000/live.mp3″

  21. Brijesh Choubey

    @Brian-
    I added a crossdomain.xml file in the root folder of this domain but still same issue:

    The code is behind a F5 load balancer .

    Brijesh

  22. Teri

    Thanks Brian- great player and exactly the clean look I need. I am using mp3 files only and it works great in FF, Safari, and Chrome, but in IE8 it opens a quicktime plugin in a new window. The same thing happens when I try your online demo. My (temporary) url is http://jbmidi.com/newsite/music.html. Any ideas why this is happening?

    • Brian Hadaway

      @Teri – Do you have Flash disabled or are you running an ad blocker? The behavior you described typically occurs when the Flash fallback fails to load.

  23. jc

    Thanks Brian- great player!
    Exactly what I needed. I am using mp3 files only and it works great on text links but doesn’t work when a href on images

  24. ongpang

    Hello everybody,
    Please help me! I want to disable Internet Download Manager when i played mp3 files because when i played mp3, it alert download mp3. UbaPlayer can playlist song or not.

    Thanks!

  25. snedled

    It would be great if it was posible to play multiple files simultaneously. Otherwise really great script!

    Thanks.

  26. Jorge

    Hi Brian, first of all, thanks for the great plugin, is there anyway I can save the option (play or pause) for the user, so when he access another page the option he chooses (still playing or paused) are saved?

    Att, Jorge.

  27. sudheer

    hello brain,
    i have a problem with flash fallback in firefox.(version 18.0.1).when i play an .mp3 file in firefox dialog box pops up asking to save the file.tried running from local server but no luck..works fine on chrome .any suggestions?

  28. Dirk

    Hello Brian, i have the same problem as sudheer. It worked fine until yesterday. This morning had my computer a Flash Update (Adobe Flash Player 11.6.602.168) and now it doesn’t work anymore. Only the download dialog pops up.
    I tryed Firefox (18.0.2) and Firefox portable (17).
    In Internet Explorer it worked fine because HTML5.
    I only use mp3 files.

    Can you help please?

  29. Naureen

    Hello Bryan,

    Great Player. We are trying to get a single audiobutton to play three mp3 files (sort of like a playlist) but not quite. The path name is stored in a php array which we are trying to feed back to the player using json. However the player seems to stop working when we try to implement json?

    We want to add a playNext() method to the Jquery code, so that the code takes in the variable length php array, plays the first audio file, introduces a delay and then plays the next one until it reaches the end of the array.

    Do you think this can be done? Did anyone else try to use json with the jquery player?

    Thanks in Advance

  30. Frank

    Hello Brian, great work, cool design – thanks a lot for this!
    I am using the player on my band website. Your player fits just perfectly.
    What I noticed -
    in the Basic Usage chapter, in the code snippet there are two forward slashes missing in front of “basic usage” So this is not commented out and I first thought that it is an intended part of the config. IE 9 worked well nevertheless, but Chrome and FF stumbled over this.

    Cheers
    Frank

  31. David Foreman

    This is great – works exactly as needed, except on Firefox – the audio links are opening in a new window.

    • David Foreman

      Actually, this does work fine in FF. The problem I am having is that the player is sat within an ASP repeater, so it’s repeating the ubaPlayer div, and therefore not showing the player in the first instance of the repeat.

      Changing the ubaPlayer from an ID to a Class then makes the MP3 files open in a new window. No good.

      Anyone have an idea where the #ubaPlayer is referenced in the script and how I can change it to .ubaPlayer?

  32. Ian Rawes

    Similar problem to you, David. Works fine in IE and Chrome, but in Firefox clicking ‘play’ opens the MP3 as a direct link – useless.

    I’ve lost count now of the hybrid HTML5/Flash players which developers begin and then abandon. I’d pay a little bit of money for something reliable and easy to install and configure.

  33. C

    David Foreman said, ” ….works exactly as needed, except on Firefox – the audio links are opening in a new window.”

    Note that the script is looking for the player.swf and the swfobject.js files inside a “libs” folder in exactly the same places they are in the downloadable version. If you move any of the files, you’ll have to edit parts of the jquery.ubaplayer.js (or .min.) for this to work properly in Firefox.

    • Brian Hadaway

      Yep. There’s a way to specify this in via config:

      $("#ubaPlayer").ubaPlayer({
      swfObjectPath: "/path/to/your/swfobject.js",
      flashAudioPlayerPath: "/path/to/your/player.swf"
      });

  34. Dan Stratton

    Brian,

    Wonderful player, but I have a problem with other referenced links (pdf file) on the page. The player works fine, but something interferes with with my link to open a PDF file of the printed music. You can see a page here: http://www.danstratton.com/test_berkey/sdg_press/display_music_query.php?music_type_sub=piano4hands

    Clicking on the PDF file below the player should open the PDF in a new window, but it doesn’t. If I disable it works, but the player goes to a new page before playing.

    Any work around? Thanks.

  35. Ian

    This works just fine for me with all the major desktop browsers. But I just can’t seem to set Ubaplayer up correctly to work for iPads or Macbooks. The player button appears but gets stuck in the hover state and no sound is played. eg:

    http://www.soundsurvey.org.uk/ubatest.html

    Where am I going wrong please?

    • Angus

      Fixed the problem within the plugin at line 99. If anyone wants to put other a tags within the li put the following.


      $(".controls").bind("click", function(event) {
      _methods.updateTrackState(event);
      if ($(event.target).hasClass('audioButton'))
      return false;
      });

  36. Tuan

    Hi Brian,

    Could i play from begin when i stop and play again? For example: i have a .mp3 when i clicked play and then clicked pause. after that i clicked play again. I want that mp3 file play from begin. Is it posible?

    • Brian Hadaway

      There isn’t a way via configuration but try changing methods.resume(); to methods.play($tgt); in the updateTrackStateFunction in ubaplayer.js.

  37. Max

    Hi Brian,

    thank you very much for this great script!!!
    I would like to use “play” and “stop” only – can you explain how to “disable” the “pause” mode?

    Thank you and best regards
    Max

    • Brian Hadaway

      Look in updateTrackState. There is an if/else if/else block that you should be able to fiddle with and produce the desired results.

  38. Justin

    Hi Brian,

    I’m also looking to figure out how to prevent a pausing so the audio file restarts when clicked.
    Thanks in advance and amazing script!

    Thanks! Justin

    • Brian Hadaway

      There isn’t a way via configuration but try changing methods.resume(); to methods.play($tgt); in the updateTrackStateFunction in ubaplayer.js.

  39. Isaac

    Hi Brian,

    As another user, Naureen, posted previously, is it possible for a playNext() function, whereby the player plays the first track, then moves to the next track? Or would this be possible with a XML file?

  40. Isaac

    To: Kamen,
    I had that problem as well. I think you just need to include the class=”controls” wrapper. See if that works.

  41. Hagay

    Hi Brian,

    Great work.

    I’m trying to set the volume to a given level using an event listener that executes the following code:
    $(“#ubaPlayer”).ubaPlayer({
    volume:0.2
    });

    but it stops the player and apply the change on a new player run.
    How can I set volume while keeping the player running?

  42. Cleo

    Just wanted to comment – THIS IS THE BEST!!!!! GREAT JOB. THANK YOU SO MUCH. I must’ve tried so many players, and this is the simplest and the best by far. It works across all 5 browsers that I use. IE10, Firefox 22, Opera12, Chrome27, Safari5. Even works on my jellybean phone. AMAZING JOB!!!! THANKS!

  43. Ivan Van Laningham

    Continuous doesn’t work. Also, the default player doesn’t play, I am required to supply values for the codecs variable. Firefox 22. (Building the test page as we speak, it’ll be there in a couple of minutes.)

  44. Alain J. Gheysens

    Dear Brian,
    First of all, I’d like to thank you for having done a wonderful job on how to play mp3 files on severall browsers with your player.
    My problem was that the web pages I design for some friends of mine could not reproduce any sound on a Samsung galaxy device. Very frustrating…
    I tried different browsers to work under android but to no avail. Simply no sound!
    After lot of research on Google, I bounced on your pages and found some answers but there was still some work to do.
    The global idea was to have sound autostarting and looping as long as you would stay on the page and I finally got it.
    I still have to change the pages of my friend’s website but there is already a sample of what I fixed during my repeated experiments to be found on http://www.olivierrichir.be/ubaplayer.htm
    If you have some suggestions feel free to send me a message.
    And again, a warm thank you for all the info I found on your site.

    Very best regards,
    Alain J. Gheysens

    P.S. The best browser to use on the samsung is their native internet browser. Apparently the script like it is now works perfect under Firefox, Google Chrome and Safari on a PC but not on the Samsung. No sound with Chrome and Opera and hashed sound with Firefox…

    P.P.S. The web page contained an error in my first message http://www.olivierrichir/be/ubaplayer.htm had to be written as http://www.olivierrichir.be/ubaplayer.htm

  45. Love Aurell

    Hi and thank’s for a great player!

    Do you happen to have the button graphics in higher resolution? I’m optimizing my site for retina displays right now and the button ends up to tiny when I make it half the size?

    /Love Aurell

  46. Mike

    Thx for a great tool Brian!

    I have a small issue with IE8: the player disappears after a second… I have seen the topic on here and Googled it, but cannot seem to fix it. Any thoughts?

  47. Synthia

    Hi Brian,

    I’m trying to use your script to play an audio, but I’d like to only have the play button without any capability to stop or pause the audio. And also, if the audio progress bar can be displayed, that would be awesome.

    Any help is appreciated.

  48. kshenai

    Having problem getting this play on firefox on an external remote site (flash failback might not be kicking in – have used absolute urls hosted on another site)

    Am trying to use this on an external site widget. Have changed all paths in jquery.ubaplayer.js to absolute urls. Is there anywhere else I need to change for eg flash etc. Is there a way to contact you directly so I can share the site url’s

  49. Daniel

    Just don’t work on IE 8 and Safari 5.1.7

    Error

    audio.playFlash(currentTrack + defaults.extension);

    error Jscript playflash

  50. Mark Senff

    So I installed everything and used your original demo code. That works fine. But as soon as I replace any of your original MP3 files with any of my own, they won’t play.

    See the first list of 4 songs at: http://mm.marksenff.com/music/

    The first three MP3s play without any problem. These are your MP3s, hosted on your server. The fourth however, doesn’t play. It’s the same markup, and the MP3 itself works fine ( http://mm.marksenff.com/wp/wp-content/uploads/2013/10/11.-Brena.mp3 )

    Any idea…..?

  51. Kristian

    How to supply multiple formats? E.e both mp3 and ogg of a particular audio file. Like you do with the audio tag in html5 and supply several source-tags.

  52. Chris

    Hi,
    I’d like to put multiple instances of ubaplayer on my website, is this possible?

    • Chris

      Got it working already, had to make some changes to your code so the controls holder could be specified. Maybe it’s a handy feature as a default?

  53. Vince

    Hi,

    how can i use the player with a table ?

    this version do not work if i put the Files in a table.

    it only works with a ul li list.

    is there any possibility to use the player also with a table ?