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
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.
Hi all,
First of all, I’m not a programmer. I’m trying to use JPlayer for my personal site. I download the playlist (n. 2) example with all scripts in the right place. When I launch the html site in local, with any browser, all goes well, the track sounds… But, when I click on the “Stop” button, the “Play/Pause” button “disappears” and it’s not possible to use this button anymore. Online all goes well and the button remains. This “local” fact (“Play/Pause” button “disappearing” after clicking “Stop” button) happens, in “any browser”, with “any JPlayer example around the web”.
May you help me, please?
Thanks to all,
Franco
Venezia (Italy)
Great Job =D
I have one question.
How I show the name of the song playing in demo player “jPlayer as a stylish audio and playlist player”?
I realy love the jPlayer!!!
Is it possible to preload a soundfile?
I know you said in the developer guide:
“The plugin does not begin downloading the new file defined by the .setFile() method.”
I’d like to make a hover-sound like this:
$(document).ready(function(){
$(“#sound”).jPlayer({ ready: function(){ $(this).setFile(“blobb.mp3″); } });
$(‘a’).hover(function(){ $(‘#sound’).play(); }, function(){ $(‘#sound’).stop(); });
});
I’d jump to the roof if this would be possible!!!
perhaps like this:
$(“#sound”).jPlayer({ ready: function(){ $(this).setFile(“blobb.mp3″).preload(); } });
Thanks for your help!!!
hi,
i try to use your plugin on my website. but i have problem with that.
when i use it like that:
$(“#jquery_jplayer”).jPlayer({
ready: function () {
$(this).setFile(“http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3″, “http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg”).play();
},
volume: 100,
oggSupport: true
})
it works fine, but when i change it only for mp3 player:
$(“#jquery_jplayer”).jPlayer({
ready: function () {
$(this).setFile(“http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3″).play();
},
volume: 100
})
it doesn’t work. i have no idea why.
Hi all.
I am using this as a sample play podcast for website. A big list of items and each with a play sample element.
I have all of it working fine and change most of the id elements to classes but I can not change the
from an ID to class because the plugin uses this. I tried to follow the code of the plugin to switch it to a class but not managed to do it and get it working.
Anyone have any ideas for this? THanks
hello
i love the player
i’m not so savvy in this stuff but i created a player from one of the demos in your page
the thing is i do not want it to use OGG files
in safari it seems to work fine
in firefox it doesnt play anything because its looking for the OGG files
i’ve tried everything
is there a solution for this?
thanks!!!
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.
“FLASHBLOCK”, the Firefox addon, excuse the misspelling
I’m not a Javascript programmer so I was wondering if in a page with multiple instances it could be possible to stop any (all) playing instances when start playing another. Just for avoiding sound crowd effect.
Hi
I get this message when running Jquery in no conflict mode:
m.fl_play_mp3 is not a function
Regards
ALwyn
Hi,
This is my first time setting up the player with a playlist.
I got the demo to work, but once I update the playlist to link to my own audio files, it won’t work.
Any idea with what the problem might be?
here is the demo:
http://totalmusicstudio.com/new/demos/index.html
the First item on the playlist is the item of my own, that doesn’t work. This is it’s link.
http://www.totalmusicstudio.com/new/audio/media/protax30.mp3
I used a converter online to convert to OGG, and this is the link, which I can’t get to play, any ideas why?
http://www.totalmusicstudio.com/new/audio/media/protax30.ogg
Please, advise!
Thank you!
Hi,
Thanks for this great work, again !
I would like to replace the song title by the cover album when playing
For sure it’s possible, but i’m just discovering wonderful magic land of jquery, and so a bit hard for me to encode properly
Are you thinking to upgrade for a version like this ?
(sorry , frenchy talking …)
Thank you and keep it up !
Nevermind my last message. Got it resolved
http://totalmusicstudio.com/new/demos/index.html
Is there some type of requirement to buffer the audio files instead of the browser having to download the whole file before playing?
Mine doesn’t seem to stream/buffer them.
Do you have an example of how to set the player up just to play a click sound when a link is hovered on?
i.e. What calls do I need to put in the hover function for the link? No visible player, just a sound effect
For some reason I can’t get any of the buttons to work, nor will it play any music.
It’s calling my jquery file, and jquery.jplayer.js
what do I do with jplayer.swf? is that needed somewhere?
my html/css is copied from this site so it should be right.
Awesome dude!
Thanks for releasing such a great work!
Any support for streaming over ShoutCast ?
Guys, where are you linking to sites that are using jPlayer? I can’t seem to find it but want some inspiration!
Hi,
This is an excellent script which solved all my work in just 6 hours. Fortunately we were handling mp3 files. I was trying to change the style of the information bar where the elapsed time is been displayed with other things like changing the buttons and the progress bar. What happened is the elapse time strucks for two seconds and it goes well. Again it does struck for 2 seconds for every 4 seconds. I removed the li statements and gave my own span. anyway i am still working on that. thanks to all the people for providing this script.
@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
Hi Mark and thanks for a great JQuery player.
Is there any way we can hide the file from the .js code, so the end user can’t see the link to the .mp3-file. I do not want my end users to be able to download the mp3 file to their computer and save it there – I only want them to be able to play the song from my website. In the demo source, It’s easy to spot the target file for a download and that is something I would not like:
$(this).setFile(“http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3″, “http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg”).play();
Thanks in advance and keep up the good work!
Hi. This plugin is awesome and it worked great for a site I just built until I discovered the audio won’t play in Firefox 3.5.7. It worked fine in 3.0.7. So I researched this entire forum and discovered all the controversy with html5 and that jplayer 0.2.5 fixed that, which is what I am using. I also converted all my mp3s into ogg files and reconfigured my code, and it’s still not working.
{name:”1. What’s Your Name”,mp3:”/music/01_whats_your_name.mp3″,ogg:”/music/01_whats_your_name.ogg”},
Would you please mind checking my source or pointing me in the right direction so I can continue to use this wonderful plugin and not abandon it? Thanks so much!
http://www.poemswithmelodies.com/ – Click on left column “Player”.
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/
When I run the demo on my website, I have no problem playing ‘the separation’ (point to the miaowmusic site). When I substitute the mp3 with a local one (I made sure that the path is correct), nothing . . .
What’s the problem?
THEMIA.