jPlayer: the CSS styleable jQuery mp3 player plugin
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 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.
$(document).ready(function(){
$("#jquery_jplayer").jPlayer({ // Instantiate the plugin
ready: function () { // Executed when the plugin is ready
$(this).setFile('elvis.mp3', 'elvis.ogg').play(); // Auto-play the audio
},
oggSupport: true
});
$("#jquery_jplayer").jPlayerId("play", "play_button"); // Associates play
$("#jquery_jplayer").jPlayerId("pause", "pause_button"); // Associates pause
$("#jquery_jplayer").jPlayerId("stop", "stop_button"); // Associates stop
$("#jquery_jplayer").onSoundComplete( function() { // Executed when the mp3 ends
$(this).play(); // Auto-repeat
});
});
<body>
<div id="jquery_jplayer"> </div>
<ul>
<li id="play_button"> play </li>
<li id="pause_button"> pause </li>
<li id="stop_button"> stop </li>
</ul>
</body>
- 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 bug reports and general discussion.
Mark P
110 Comments to jPlayer: the CSS styleable jQuery mp3 player plugin
Leave a Reply
Categories
Archives
- March 2010 (1)
- January 2010 (1)
- August 2009 (1)
- July 2009 (1)
- May 2009 (1)
- April 2009 (2)
- March 2009 (1)
- February 2009 (2)
- October 2007 (1)
- May 2006 (1)
Hi,
this plugin seems to be great work!
Is there a way to check if the player is currently playing? I’m not pretty experienced, as you can assume, but it would be great if someone could answer my question.
thanks
Basti
This player is great but I can’t get the demo working.
I THOUGHT I fixed the paths because the page now says “Now Playing: the Separation” (it was saying “Now Playing: none” earlier).
But even so, it never starts playing music.
This is driving me nutty. Any ideas?
I read through the thread with Lee but I didn’t really understand it (sorry I’m not a developer).
http://www.redeemerhoboken.com/demo.html
Any advice would be great.
Thanks!
Hi,
Great player ! Just one question, how can I get the current value of myPlayedTime for e.g. in a textfield by pressing a submit button?
This is what I use:
#rt_test is a textfield
myPlayedTime is not working, it should have the value at the moment I press the submit button. It shows the text myPlayedTime now.
Any idea how to do this?
Regards,
Marcel
Hi Marc,
First of all, thanks for a great innovation !
Now a strange issue. I am from GMT + 530 time zone. While loading the mp3 file, it shows 5 min 23 seconds time as 35:23 as total time. Also running time/ progress is original time + 30 minutes. When I further investigate, I noticed myTotalTime.getMinutes may be this is adding the extra 30 minutes from my time zone. I subtracted the 30 mins and it is showing correct time now.
Whoops, I finally got it.
(forgot to add )
Thanks again for this.
Hi,
Great player. I try to use it to create an online sample from a mp3 file. When the jplayer is playing a mp3 file I want to mark a start and end point by pressing a submit button. The moment the button is pressed the current ‘myPlayedTime’ needs to be stored and displayed in a textfield. I do not know what variable contains the current playtime and how to retrieve this value.
This is what I have:
input type=”submit” name=”begin” id=”begin” value=”Begin” onClick=”$(’#rt_begin’).val(’???’);”
rt_begin = a textfield
All I need to know is what ??? should be. I hope someone can point me in the right direction. I am rather new to jquery but very enthousiastic are trying to learn it.
Marcel
jPlayer 0.2.3 beta has now been released. Check out the jPlayer 0.2.3 beta Release notes for the changes. The most notable being HTML5 audio support.
Note that the original post has been edited so that the code conforms to jPlayer 0.2.3 beta. ie., The use of $(this) in the ready() and onSoundComplete() functions.
NB: I seem to have fallen behind with comments on this blog, I will reply to them shortly.
@Stephan: Your link went to http://www.reitanlage-haferklinten.de/reitanlage.html so I took a look and found that I had to enable the console in Firefox to get anything to work. IE7 gave runtime errors because of the code in domscript.js line 61: console.log(’Document ready’);
The problem you are facing is because of what LightBox does to the Flash. The Flash is being hidden and this causes the Flash to effectively unload from the browser.
I did a check in my demo 1 by adding the following lines:
window.setTimeout( function() { $("#jquery_jplayer").hide(); }, 5000);window.setTimeout( function() { $("#jquery_jplayer").show(); }, 10000);After 5 seconds the Flash is hidden and stops working. After 10 seconds the Flash appears on the page again, which is why the jPlayer ready() event is triggered again causing the music to start playing again from the beginning in my demo.
Not exactly sure how to solve this problem, but you could try hacking Lightbox for your specific needs. Line 155 below hides items on the page that would freak out the nice page mask that the Lightbox uses. Line 263 below shows them again. The Flash is either in an object (IE) or an embed.
If you do not use any visible Flash on the same page as LightBox, you could try changing:
155:
$("select, embed, object").hide();263:
$("select, embed, object").show();To:
155:
$("select").hide();263:
$('select').show();On a side note, your .click() handlers for the sound buttons should
return false;to prevent the default operation. ie., Going to href=”#”.I guess that English is not your first language, but I thought the logic of using the class “start” on your sound controls was a little wonky. If you added the class “start” in the HTML page then your code would NOT automatically start the mp3 playback. However, maybe you added this in an attempt to stop the music auto-playing when the LightBox closed.
@ben: As Uri Tz said, remove the
.play()from the$("#jpId").setFile("file.mp3").play();line in the ready event.@Uri Tz: Cheers for helping Ben out.
@Lee: The problem is that you are using the demo HTML for release 0.2.1 while using the jPlayer release of 0.2.2. There were a few naming convention changes that are causing your problems. Gain access to releases and their set of demos via the download page. The main Demos link works a little funny, due to maintaining a comprehensive set of demos for each release, but this only affects you when you start viewing an older release area.
@Syed Ahmed: Have you got a development area link that I could review? - In the meantime, your error would imply that the Flash is not available, either because it is not in the default “js” relative directory or you set the constructor
swfPathoption incorrectly.@Genero: You share the same problem as Ben above. Remove the
.play()from the$("#jpId").setFile("file.mp3").play();line in the ready event. As for your second problem, not seeing any images… Have you a development link that I could view?@Schoenobates: Thank you for the feedback. Feel free to post links to your jPlayer creations.
@Tom: You share the same problem as Ben and Genero above. Remove the
.play()from the$("#jpId").setFile("file.mp3").play();line in the ready event.@Olga: The source needs to be compiled in order to work. Not the Javascript of course, but the Flash Actionscript 2 file
Jplayer.asmust be compiled into the SWF. Use the MTASC Actionscript 2 compiler. It’s open source and free! View the top of theJplayer.asfile for the compile command I used.@EnigmaCurry: I am not sure why you are experiencing a 15MB limit on the mp3 file. I will need to look into this and get back to you.
@Ryan: You share the same problem as Ben, Genero and Tom above. Remove the
.play()from the$("#jpId").setFile("file.mp3").play();line in the ready event.@Basti: At the moment, the “is playing” information is not stored directly in the plugin. Depending on what you are doing with jPlayer, you could maybe test to see if the play button ID is hidden or not. Not particularly elegant, but it may do you for now. In future I am considering storing a set of diagnostic data in jPlayer, and whether it is playing or not would be one of these diagnostics.
@JT: Glad you got your demo working ok. Let me know how you get on.
@Marcel: This problem is similar to Basti above, where you want to request the state of the player. The states are not stored directly in the current releases. The time information is currently updated 20 times a second via the function provided in a
jPlayer.onProgressChange(fn)statement. You could try storing the data and using it from your button.$("#jpId").onProgressChange( function(lp,ppr,ppa,pt,tt) {myPlayedTime = pt;});<input type="submit" name="begin" id="begin" value="Begin" onClick="$(’#rt_begin’).val(myPlayedTime);" />@Gajendra: Yeah that is odd hey. But I think I know why. I need to change that bit of code in the HTML for the demos so that it uses the UTC time. That will be independent of your timezone. I will review the demos in the future, but in the meantime you should look at the Javascript Date Object. Technically this is a problem with my demos and not the jPlayer plugin itself.
Hi
Thanks for your reply re: podcast plays automatically. I have now got it working properly. Awesome player, it fits so well into my site.
Many thanks for the excellent work.
@EnigmaCurry: I tested jPlayer using an mp3 file with properties:
40,642,061 Bytes
128kbs
2 channel (stereo)
44kHz Audio Sample Rate
42:20 length
The file worked with jPlayer 0.2.3 in Firefox 3, IE7, Safari 3 (PC). I checked jPlayer 0.2.2 in Firefox 3 and it also worked.
I’m not sure what to suggest at this time other than checking that your server does not have a maximum response size / file size.
@Genero: That’s great. You have a nice site. Genero’s jPlayer Podcasts
does it support .wma .wav .mid?
Mark P , nice work, I was thinking to use soundmanager2 but your player 3 times smaller and I already have jQuery all over my website so Jplayer seems like the way to go for me. Thanks again.
I was testing it on Mac under Safari 4.0.1 and next/prev tracks does not work , always first track is playing. Please fix as soon as possible.
Could you please also add or provide method to stop/cancel current downloading process of mp3 file. For example if loading of mp3 file takes too long I want to add stop/cancel link for end users.
Thanks
P.S Safari 4 under Windows has same problem as I described in previous post.
For the future version I would love to see your support for mp4 and RTMP live streaming
here is example of swf plugin :
http://flowplayer.org/plugins/streaming/rtmp.html
@mycm: Currently jPlayer only supports mp3 format.
@Sergey: Thank you for pointing out the problem in Safari 4. A fix is in testing and we plan to release it tomorrow.
You can cancel a download by using the
jPlayer.setFile(f)method. If you set the file to the same file that is playing, the download is canceled and the user can choose to restart the download using the play button.While we may enable more audio formats in the future, video formats are less likely. We have tried to keep a firm leash on feature creep and supporting many formats is one sure way to bloat the plugin. Maybe once jPlayer matures we will look into developing a different plugin for video.
jPlayer 0.2.4 beta has now been released. Check out the jPlayer 0.2.4 beta Release notes for the changes. The most notable being HTML5 ogg format audio support for Firefox 3.5 and fixing the Safari 4 bug with
jPlayer.setFile()reported by Sergey above.Note that the original post has been edited so that the code conforms to jPlayer 0.2.4 beta. ie., The use of
{oggSupport: true}constructor option and additional parameter in thejPlayer.setFile( mp3, [ogg])method.Hi, I am using this plugin in an ASP.NET web application, and it works pretty fine, but I am facing a problem just with FF3, where nothing happens after page has loaded, though the same code works fine on all other browsers, FF2, FF3.5, all IEs, Safari, Opera as well as Chrome.
I don’t know what might be going wrong here, but is this because of the problem between FF3 and Flash 10b, Wonder then how come it works fine on FF3.5. Firebug tells me that the flash is loading fine, but it won’t start playing on its own, and when I click on any of the buttons, firebug throws an error like “m.fl_play_mp3 is not a function”, “m.fl_stop_mp3 is not a function”, etc, in the jquery.jplayer.js.
This thing also occurs with the same browser on a hosted site as well.
Another strange thing, when I accessed my local site application on another machine on the network with FF3 and Flash 10b, it worked as it should.
I wonder what could be wrong here, is it me, or there is something bigger that’s causing this strange behavior.
Hey Mark,
I have a problem in jquery when a mp3 is downloading.
If i see the download progress indicator and while its going if i do a ajax request it
will wait till the buffer download is finished and then execute it.
So there is a fair delay when working with ajax stuff if the download is going.
Did you come across this? and do you know a possible work around or solution?
tnx!
hi there!
i am not a very good jquery / javascript programmer, but i love your player and i got it already working!
now i try to put somewhere else on the page a tracklist, with which i’d like to remote control the player.
i tried it by using the following code:
play
but i doesnt work. i think it is a little more complicated
any help is very appreciated!
thx in advance!
till
@Harry Liddle: I’m not sure what your problem is. My initial thought was that the Flash Security Settings were stopping you from accessing local content, but that would have affected more than just the FF3 browser. Also, you mention that you had the same problem on a hosted site, where the security should be fine. Accessing your hosted site should be the same as accessing your local site application over your network.
Do you have a development link that I could view?
Does your “other machine” work with the hosted site?
@sooze: I did a basic test to check ajax requests during mp3 downloads and did not find a problem. For more information see the jPlayer Google Group discussion: problem with ajax requests while downloading mp3.
@till: Maybe this blog did something to your piece of code, but
<a>play</a>by itself will not do anything. In our demos we use an unordered list with list items that have an id, which we then associate with the particular control.You should look at the 2nd demo if you have not already:
jPlayer 0.2.4 Playlist Demo
You say that you’d like the playlist to be separate from the player and this could be achieved by changing the CSS and the placement in the HTML of the lines:
<div id="playlist_list"><ul><!-- The function displayPlayList() uses this unordered list --></ul></div>Tutorials for web technologies are commonplace on the web. I often use w3schools.com for HTML, CSS and JavaScript. jQuery is well documented on its own site.
As this blog article is becoming rather long, would future bug reports and support requests be made at the jPlayer Google Group.
Cheers
@Mark: Thank you for your answer.
You are right, the blog did some strange thing to my link
let me describe what i want to do:
Somewhere on the site is the player. And on another position there are different, lets call them releases, with different tracks. Each track has its own play link, which should remote control the player. As these releases lists are already programmed in php i tried to use a simple a-link tag with a href=”Javascript:function…” to control the player.
right now i try to create a javascript function:
function playThisTrack( track ){
$(”#jquery_jplayer”).jPlayer.setFile( track ).play();
}
and on the a-tag i tried to call the javascript function in href= for example like this:
javascript:playThisTrack(”test2.mp3″);
if you tell me that this works, or that it theoretically is possible, then i will try to find out how it works. you dont have to give me the correct code
thx in advace
cheers, till
@till: Yes it is possible.
However, your code needs a tweak:
function playThisTrack( track ) {// $("#jquery_jplayer").jPlayer.setFile( track ).play(); // wrong$("#jquery_jplayer").setFile( track ).play(); // correct}On the jPlayer Google Group there was a link posted that seems to do something similar to what you are after. I’ve copied it below for you.
Art of Rhyme’s New Joints - Click on a song title and jPlayer appears.
@mark: thank you very much for your help!
Having a stop button is stooopid .. pause is more than enough.
Sometimes the song doesn’t load completely, eg. song duration is 3:15 and the player just load 1:12. Why is that?? How can i fix it? Thanx sry about my english =)
Hi Mark,
Firstly, great mp3 player plugin! Its exactly what I was looking for.
I am having one problem I can’t seem to solve. The function onSoundComplete() is not getting hit when certain mp3’s are finished playing. Have you come across any instances where the onSoundComplete() function does not get hit?
The code works for some mp3’s so I’ve ruled out the possibility that its my code that is the issue. Could it be the mp3 itself or the way that onSoundComplete() is called?
Any help with this would be much appreciated.
Rgds,
Martin.
Hey Happyworm, just wanted to let you know I used your player, and I’m happy about it! Thank you so much!
http://www.mitchwells.com/music/
Just when I fell for this script, FF 3.5.2 broke it (I think.) Your demos still work in 3.5.2 but I believe that is because OGG is on. If you set it to false, the whole thing seems to break.
Hi all,
Mitch is right.
Since FF 3.5.2 i have a bunch of JS errors.
Hi, Congratulations for this player A+++
I tried to implement this on ony of my sites, but I don’t know what i’m doing wrong, because when a debbug with firebug return me this error:
m.fl_play_mp3 is not a function
[Break on this error] var r = m.fl_play_mp3();\r\njquery.jplayer.js (línea 105)
m.fl_stop_mp3 is not a function
[Break on this error] var r = m.fl_stop_mp3();\r\n
I don’t have any idea what ´re wrong, here is my source code:
http://www.angeldedurango.com/mp3player/test.php
thanks for all
After playing around with jPlayer, I noticed that it’s not such a good idea to use the .stop as the function name. I had a jquery kwicks (sliding menu) on the same page, and it seems that the .stop command interferes with the animation from kwicks. Im pretty sure I’m not using the same ID. And not too sure exactly which part of the source is causing this but I did a global search and replace for “stop” to “stoptrack”, seems to work fine now.
I’d assume the .stop would somehow interfere with jQuery’s .stop for animation.
I’m using Firefox 3.0.13
Paul
Hey dude you can create a minified version of your wonderful plugIn with this http://javascriptcompressor.com/
I’m evaluating jPlayer and it seems great!
Had an issue with FF3.5 not playing mp3s since it uses the html5 code, so I made a change to jPlayer to make html5 optional:
— jQuery.jPlayer.0.2.4/jquery.jplayer.js 2009-07-01 20:26:20.000000000 +0200
+++ jquery.jplayer.js 2009-08-16 09:02:56.000000000 +0200
@@ -43,7 +43,8 @@
top: 0,
left: 0,
quality: “high”,
- bgcolor: “#ffffff”
+ bgcolor: “#ffffff”,
+ html5: true
};
$.extend(config, options);
@@ -67,8 +68,9 @@
var configForHtmlAudio = {
html5: Boolean((config.oggSupport) ? ((config.canPlayOGG) ? true : config.canPlayMP3) : config.canPlayMP3)
- };
- $.extend(config, configForHtmlAudio);
+ };
+ if (config.html5)
+ $.extend(config, configForHtmlAudio);
$(this).data(”jPlayer.config”, config);
Hi, with reference from the souce code in demo “jPlayer as a stylish audio and playlist player” , i am able to get the audio player up and working fine in the latest IE version, however when i tried previewing it in firefox 3.0, the audio does not seem to be able to load . Is there any reason to it ?
jPlayer 0.2.5 beta has now been released. Check out the jPlayer 0.2.5 beta Release notes for the changes. The most notable being a major bug fix to HTML5 audio support due to browsers adopting the
canPlayType(MIME)returning “”, which used to return “no”.@Joe: The stop button is easily removed, assuming you know some HTML, CSS and Javascript. You style this thing how you want, all we did was provide some demos that used all the abilities.
@Luncho: The MP3 files for Flash must be Constant Bitrate Encoded with a sample rate a multiple of 11,0025Hz. ie., 22,050Hz and 44,100Hz are valid sample rates. Otherwise Flash cannot play the MP3 files correctly.
@Martin P: I expect this is due to the MP3 encoding. See @Luncho above.
@Mitch: The latest release, 0.2.5-beta fixes this problem. The reason why it broke was due to the HTML5 Draft Spec changing, where
canPlayType(MIME)changed from returning “no” to returning “” when a mime type could not be played.@Charlie: It looks like you sorted the problem now as http://www.angeldedurango.com/ seems to work.
@Paul: Thank you for bringing the
stop()naming conflict to our attention. In a future version of jPlayer we will fix this.@Sapher: We plan to start releasing minified versions when jPlayer leaves beta. Thanks for the link.
@Patrik: See @Mitch above. The latest release, 0.2.5-beta fixes this problem.
@daniel: Not sure why you had this error in FireFox 3.0. If you were using FireFox 3.5.2 then you would had this problem with jPlayer 0.2.4-beta. I just tried the demo on FF3.0.13 and it worked using Flash and MP3 files.
Note that, commenting on this blog post will now be moderated more strictly.
Bug reports and support requests should be directed to the jPlayer Google Group.
For those who still have in trouble with the subject: html5-oggSupport = false, please don’t blame on this great plugin, instead
-first: check the .swf file path
-second: verify you have not enabled the firefox addon “Flashblock”, please disable it for jPlayer testing and restart Firefox as “allow flash in this site” won’t work.
Awesome dude!
Thanks for releasing such a great work!
Guys, where are you linking to sites that are using jPlayer? I can’t seem to find it but want some inspiration!
@Jay We will be adding a page detailing sites using jPlayer with our next release - due early next year.
Hi I used this a while back for http://raremusicrecordings.co.uk/ - I think I hacked around with it (can’t remember for the life of me why) for quite some time but got it to do what I wanted out of it in the end, would be better if the clickable’s were anchors rather than li elements for accessibility mind. cheers, great plugin
I love your plugin, jPlayer.
I’ve manage to convert a single file into a soundboard. Using other plugins would have been a lot more difficult.
Use that to make a project for teaching Japanese’s Hiragana and katakana.
Link:
http://code.google.com/p/learn-those-kana/
Hi
downloadable demos would be helpfull.
Thanx for sharing
Marco
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.