jPlayer: the CSS styleable jQuery audio player plugin
[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 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.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
});
});
<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 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.
147 Comments to jPlayer: the CSS styleable jQuery audio player plugin
Previous Posts
- The Hyperaudio Pad – Next Steps and Media Literacy
- Breaking Out – The Making Of
- Breaking Out – Web Audio and Perceptive Media
- Altrepreneurial vs Entrepreneurial and Why I am going to Work with Al Jazeera
- HTML5 Audio APIs – How Low can we Go?
- Hyperaudio at the Mozilla Festival
- The Hyperaudio Pad – a Software Product Proposal
- Introducing the Hyperaudio Pad (working title)
- Accessibility, Community and Simplicity
- Build First, Ask Questions Later
- Further Experimentation with Hyper Audio
- Hyper Audio – A New Way to Interact
- P2P Web Apps – Brace yourselves, everything is about to change
- A few HTML5 questions that need answering
- Drumbeat Demo – HTML5 Audio Text Sync
Tag Cloud
-
Add new tag
AJAX
apache
Audio
band
buffered
Canvas
CDN
chrome
community
custom tags
firefox
gig
HTC
HTML5
Hyper Audio
internet explorer
java
javascript
journalism
jPlayer
jQuery
jscript
LABjs
leopard
media
Mozilla
MVP
opera
opera mini
osx
P2P
Popcorn.js
poster
prototyping
rewrite
safari
Scaling
simplicity
SoundCloud
timers
tomcat
video
Web Apps
web design
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.
Thanks,
Mark Anderson
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.
hi,
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.
philipp
Quick question regarding filelocations… can they be outside the webroot?
Also you like to gather statistics of file plays….
Hi,
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 !
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 ))
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.
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 http://www.madame-gillette.de/index.php, i hope this might help to detect the problem?
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?
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 :
mysongName
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
ArtY
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?
Ok, i’m a noob xD, problem solved. Local server is the problem, in my webpage works fine.
Sorry, delete my comments if necessary.
this is very nice work ~ thank you
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,
Stephanie
Thank you for that great innovation. I made an example with jPlayer plugin here, http://balboard.com . 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?
Thanks.
Hello!
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
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.