UbaPlayer – The jQuery HTML5 Audio Player with Flash Fallback

Posted by & filed under Front-End Development.

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

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

    Reply
  2. Ralf

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

    Reply
    • Brian

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

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

    Reply
    • 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.

      Reply
    • 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"'}]});

      Reply
  5. 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?

    Reply
  6. 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

    Reply
  7. 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?

    Reply
  8. 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

    Reply
  9. 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

    Reply
  10. 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

    Reply
    • 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.

      Reply
  11. 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?

    Reply
    • 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.

      Reply
  13. 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 ?

    Reply
  14. 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

    Reply
    • 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.

      Reply
  16. 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

    Reply
  17. 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!

    Reply
  18. 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.

    Reply
    • 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!

      Reply
  19. 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!

    Reply
  21. 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!

    Reply
    • 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.

      Reply
  22. 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!

    Reply
  23. 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 ?

    Reply
  24. 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″

    Reply
  28. 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?

    Reply
    • 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.

      Reply
  29. 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

    Reply
  30. 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!

    Reply
  31. snedled

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

    Thanks.

    Reply
  32. 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.

    Reply
  33. 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?

    Reply
  34. 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?

    Reply
  35. 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

    Reply
  36. 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

    Reply
  37. David Foreman

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

    Reply
    • 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?

      Reply
  38. 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.

    Reply
  39. 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.

    Reply
    • 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"
      });

      Reply
  40. 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.

    Reply
  41. 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?

    Reply
    • 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;
      });

      Reply
  44. 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?

    Reply
  45. 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

    Reply
  46. 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

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>