jPlayer: the CSS styleable jQuery audio player plugin

Tuesday, May 5th, 2009

[Edit: jPlayer 2.x now supports video. Released 20th December 2010.]

With the jPlayer plugin for jQuery it is possible to include a fully customizable mp3 player on webpages. jPlayer has been developed by Happyworm and features standard track and volume controls as well as the possibility to play a playlist.

jPlayer Demo

jPlayer Features:

  • play and control mp3 files in your webpage
  • create and style an mp3 player using just HTML and CSS
  • add sound effects to your jQuery projects
  • improved bandwidth in HTML5 with alternative ogg format support

What’s unique about this plugin is that the designer has full CSS control over the audio player on their webpage. Using standard HTML and CSS, they can style the audio player to be added to their site so that it fits with their overall site design.

The plugin checks for and uses HTML5 <audio> tag support for mp3 and ogg formats in complaint browsers, otherwise it uses a piece of Flash to play the mp3 files. This is hidden from view and the final look of the site is entirely up to the designer. As you’d expect, the operations of the plugin may be customised using bespoke javascript code in the webpages to perform whatever functions required.

For example, the following code automatically plays and then repeats ‘elvis.mp3′ or ‘elvis.ogg’ depending on browser support. Play, pause and stop controls are also made available.

	$("#jquery_jplayer").jPlayer({ // Instantiate the plugin
		ready: function () { // Executed when the plugin is ready
			this.element.jPlayer("setFile", "elvis.mp3", "elvis.ogg").jPlayer("play"); // Auto-play the audio
		oggSupport: true,
		customCssIds: true

	$("#jquery_jplayer").jPlayer("cssId", "play", "play_button"); // Associates play
	$("#jquery_jplayer").jPlayer("cssId", "pause", "pause_button"); // Associates pause
	$("#jquery_jplayer").jPlayer("cssId", "stop", "stop_button"); // Associates stop

	$("#jquery_jplayer").jPlayer("onSoundComplete", function() { // Executed when the mp3 ends
		this.element.jPlayer("play"); // Auto-repeat

<div id="jquery_jplayer"> </div>
	<li id="play_button"> play </li>
	<li id="pause_button"> pause </li>
	<li id="stop_button"> stop </li>
    The MP3 files used must be encoded according to the browser’s Flash Plugin limitations:

  • Constant Bitrate Encoded.
  • Sample Rate a multiple of 11,0025Hz. ie., 22,050Hz and 44,100Hz are valid sample rates.

Please use the jPlayer Google Group for support, bug reports and general discussion.

Mark P

NB: This post has been updated for jPlayer 1.x series. Please visit the main site for the latest documentation for jPlayer 2.x and above.

NB: This thread has been closed. Please use the jPlayer Google Group for support requests.

Tuesday, May 5th, 2009 CSS, flash, HTML, javascript, jPlayer, jQuery

147 Comments to jPlayer: the CSS styleable jQuery audio player plugin

  • Music in Firefox refuses to play. This is the error I receive.

    Error: uncaught exception: Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error.].

    Does anybody know what may be causing this?

    Any help is greatly appreciated,
    Mark Anderson

  • It seems my latest Query was remedied by a reinstall of Firefox. Some file in the browser had become corrupted. The player works perfectly! Thanks for creating such a user friendly audio interface.

    * You can go ahead and delete this and my former post.

    Mark Anderson

  • Marco says:

    downloadable demos would be helpfull.
    Thanx for sharing


  • Michael says:

    Looks (and sounds) like outstanding work. I’m guessing this will receive a lot more attention very soon, given that Apple isn’t supporting Flash on this newfangled iPad computing device.

  • Philipp says:


    it’s a great player – the only thing is that on the iphone the songs don’t play with the playlist player. in the single player they do.


  • Brian says:

    Quick question regarding filelocations… can they be outside the webroot?

    Also you like to gather statistics of file plays….

  • Basti (again) says:


    thanks again for planning a new release and keep this good thing going on.

    I asked a few months ago about a way to find out if the flash is actually playing. This is really a great wish and i’m shure that I am not the only one who would like to see that feature.

    For example I like to display a list of tracks, some with a “play” button behind it. There is no “master” play / pause button on the page because this would break the concept. Each button should get a pause-button when the actual track is playing.

    If I press a play button and another track is playing, the player should stop and begin loading another mp3.

    There are some flash players, I even would pay for but I think it’s not the right way to have 10 Flash objects on a page where max. one single should do the job as well… Of course I’m willing to pay for your jPlayer, too : )

    Maybe I’ll do it with a hidden “master” play / stop button, but this solution is quite unsexy. I’ve just started thinking about it and keep you informed about the solutions I’ll try to find.

    Nevertheless, I hope you’ll tell me to integrate that functionality in your upcoming version : )

    I apologize for my crappy English – hope you understood !

  • Vern Baker says:

    I can see this working on your website, but like so many others, no matter how I install it, or what webserver it place it on… I get the dreaded:

    “m.x_x_x is not a function” error.

    It seems no matter how its installed, this occurs. I have tried copying your example page, using external js libraries, using them locally, checking the rights, ensuring no other players are playing, and on and on. I know jQuery is working, because other events are functioning correctly. What blows me away is that I can plainly see and hear your demo working, but if I orient the browser to run it locally, it fails. I have even tried remote access to see if it is an issue of local access.

    What ever the problem is, should I solve it…. others will surely find this and go “There! Thats IT! Now I can finally have my jQuery scrolling MP3 player goodness!” (( hopefully ))

  • Vern Baker says:

    I should mention (and I checked this), if you have FireBug active while running jPlayer, the exact same error message as above is shown, and the demo hosted at happyworm fails. That might be a thread to pull on.

  • GoodJob! says:

    Sry i have no GoogleGroup Account so i post my Feedback/Bug here.

    I found this Topic in there “m.x_x_x is not a function error ” and i think i have the same problem online on this site, i hope this might help to detect the problem?

  • Asif says:

    It seems to be great plugin jPlayer.

    I am newbie. So can toy help me about how i can integrate this plugin to run live audio stream. For e.g. if i have link BBC Radio which is live audio stream can we use this plugin?

  • ArtY says:

    Hello, tkx for this very useful plugin !

    But I still have a problem when I try to put an unordered list in the “jplayer_playlist” div. When I wrote :


    that doesn’t work and the song isn’t played

    Could you please show me which syntax I should use instead ?

    Tanks again and sorry for my bad english


  • DJ Chena says:

    Hi, i have a big and strange problem whit the player. My problem is in Firefox, this explorer works fine whit the ogg option active, but i need work only whit mp3 files.

    Then i configure all to my priorities, whit ogg disabled, and works fine in all other explorers, but in Firefox, the player only works many times, but not all times.

    After activate warningAlerts and errorAlerts, i see the problem, many times, the .swf file not found, when refresh page, the player works or not, random.

    Any idea about this problem?

  • DJ Chena says:

    Ok, i’m a noob xD, problem solved. Local server is the problem, in my webpage works fine.

    Sorry, delete my comments if necessary.

  • windhamdavid says:

    this is very nice work ~ thank you

  • Stephanie says:

    Dear Mark,

    If I embed the player in my sidebar, is there an option for viewers of the site to download the songs in the playlist? (right clicking or a download button)

    I am hoping it would be a tool to promote my own music

    Thanks so much,


  • Evan says:

    Thank you for that great innovation. I made an example with jPlayer plugin here, . There is almost nothing that you can’t do. I love this. Just one question;

    Is there any way to check something every x seconds instead of every milisecond (using “onProgressChange”) ? For example a way to trigger a function when x seconds left to finish song?


  • booka says:


    I got some firefox issue, dunno how to fix it. Can anyone please take a look?

    Only next and previous buttons are working. But no sound, no progress bar, no times…

    Thanks a lot in advance

  • Mark P says:

    As we requested on 25th August 2009:

    Support requests and bug reports and should be directed to the jPlayer Google Group.

    As you will have noticed, we have not been providing support via this blog since that date. It does not take long to sign up, even if you do have to create a google account. We usually check for and respond to posts on the jPlayer google group on a daily basis.

    This thread has now been closed.

    Best regards,
    Mark P.