The Worm Hole

Mark P says:

@jQueryFan: At this time no attempt has been made to hide the mp3 files from the user. The mp3 files have been defined in the javascript code used to control the plugin. Any savvy visitor could view the source and obtain the direct links to the mp3 files. We have some ideas to get round this, but believe it relies on having some server-side functions that we were trying to avoid.

@mattpaul: Thank you for your words of encouragement. Cheers for pointing out the broken link.

@gecko: The playlist demo is an example of how the jPlayer may be used. The playlist functionality is not part of the plugin itself. We have ideas about incorporating playlist functionality in the future, but for now we provided a simple demo of how the plugin could be used to work with a simple playlist system.

Mark P

Mark P says:

You may me interested in reading the discussion on reddit about jPlayer:

We created a plugin for jQuery – jPlayer that allows you to create a 100% CSS styleable mp3 player. We are looking for feedback!

Mark P says:

@alex llao: This is a common problem in flash. See the The Chipmunk Problem for more information.

@Larry Battle: This is a known bug with playHead() being used before play(). We are working on a fix for this. Thank you for pointing it out and helping us direct our time to the important parts. The jPlayer source is available on the download page.

@WebGyver: Thanks – nice blog

@Jason: We are aware of some problems on linux and safari 4 beta, we hope to address these soon. The current browser list can be found in the jPlayer 0.2.1 Documentation.

@Wayne: This is easy enough to build into a theme, despite it having limited application. Including it in posts may be more tricky, as you would need the javascript code and the HTML for the player. The CSS definitions would either be in the post or in the theme’s CSS file. Ideally, we’d like to create a WordPress plugin to do all the hard work. If there’s anyone out there who wants to have a go, we’d be interested in seeing the results.

@Eric: Nice site and nice music. As for your problem though, I’m not sure what is wrong. Assuming you verified that the jPlayer ready function is being called using something simple like:

$(“#vtv4-jplayer”).jPlayer({
  ready: function() {
    alert(“jPlayer ready() called!”);
  }
});

…Then it would imply that there is some problem with your code in IE. I reviewed the code in FF and could not find anything glaring in the code. I attempted to view your site in IE7 and noticed that you disable all the jPlayer functions so I was not able to poke around too much myself.

Do you have a development area that i could review?

At the moment there are not any diagnostic calls for the Flash. If the ready function is successfully called, then the jPlayer is correctly instanced on the page and Flash has successfully issued a callback to the jPlayer’s javascript part of the plugin. (Which was what called the ready function you defined.) I’ll have a think about possible diagnostics for the Flash part of jPlayer.

Mark P says:

@ Eric: Ok I understand where the problem is manifesting now. IE is very fussy about the Flash being inserted after the page has loaded, which is what jPlayer does. With IE, the plugin has to copy items to the document definition for it to work. (See jquery.jplayer.0.2.1.js lines 139-159 for where the DOM is edited.) It appears that I overlooked that getMovie’s conditional statements are now redundant as all browsers have the Flash contained in the document definition. Thank you for pointing this out, I will change this for the next release.

I’d still like to understand why the IE’s window[fid] did not work. That is the standard way of referencing the Flash in IE. I will have to look into it a little further before I comment again. ie., What were you doing to cause jPlayer 0.2.1 to break on IE.

Mark P says:

@Larry Battle: Actually Larry, it looks more like you attempted to use .playHead(10) before the plugin was ready. If the .playHead(10) was given inside the constructor’s “ready” function then it still does not work just yet, but it would not give an error.

For example, this is bad as the commands would be executed before the jPlayer is ready.
$(“#jquery_jplayer”).jPlayer(); // No ready() defined
$(“#jquery_jplayer”).change(‘elvis.mp3′); // jPlayer is not ready here
$(“#jquery_jplayer”).playHead(10); // jPlayer is not ready here

@tof: Thanks

Mark P says:

@Eric (viennateng): I just reviewed that link on IE7 and used IETester to check IE6 and IE8 and found that they all seemed to work just like in Firefox. The sound did appear to crackle and such when changing the playHead in all 3 versions of IE6-8, while that does not happen in FF3. Other than that, the CSS styling of the player came out slightly differently in IE6 and IE8. No runtime errors or anything for me in IE though. I’ll look into this again later.

Mark P says:

@Ralph W: The demos included with each release demonstrate how the mp3 file is specified. These demos have a piece of javascript in the HTML file that specify which mp3 file to play. So I’m not quite sure what you are asking about.

@Pascal W: Can I achieve this with jPlayer? Yes, but there are not any demos of this. You’d need a piece of PHP or other server-side script to check for a session and if not found, create the session and insert the jPlayer auto-play command into the page.

Mark P says:

@Ralph W: Great Let us know how you get on with it.

@Alex: I’m not exactly sure why the auto-play is not working for you, but you have some redundant code there. This bit:

$(”#play_btn”).click(function() {
$(”#jquery_jplayer”).setFile(’/js/impatient.mp3?).play();
return false;
});

…is overriding the .click event created by the plugin by this command:

$(”#jquery_jplayer”).jPlayerId(”play”, “play_btn”);

Furthermore, you do not need to set the file every time. You only need to set it when the mp3 file changes. In your case, you only need to define it in the ready statement and the subsequent play() commands will reply the same mp3.

Other than that, you have not defined an HTML element with the id=”play_btn” or id=”pause_btn”. So your on page controls should not be working either at this point, not just the auto-play.

I note that you are using absolute addresses for the mp3 file based on your server domain. The mp3 file is also in the /js/ sub-directory. I take it you have the correct path to the mp3 file? If in doubt, you can always use the full absolute URL ie., “http://www.domain.com/someDir/mp3/impatient.mp3″

@Skudd: Excellent! When you’re ready maybe you could let us have a look at what you come up with. It sounds great.

@Lee: I am only guessing here, but I think you may be trying to use jPlayer offline ie., running it locally on your computer from the files directly. Flash has some strict security rules about using local files and as a result you have to change you Flash Player settings to allow the directory to work on your PC. You have a choice here 1) Run it online at your domain, 2) Run it locally on a server such as Apache, or 3) Change your Flash Security Settings to allow local access to SWF files run in the directories you are using. Let me know if this solved your problem.

@rpaul: Running offline requires that you set your Flash Security Setting appropriately, or use a local server. (See my comments for @Lee above. )

@Wulf: I just reviewed the plugin code and although we said ‘relative’ in the documentation, an absolute URL should work here too. Use the option in this manner:
{ swfPath : “http://www.domain.com/js” }

Note that the plugin adds a trailing ‘/’ so do not add this yourself or the path will have a ‘//’ at the end.

Mark P says:

@ Wulf: Great! I’ll update the documentation for the next release to remove the ambiguity.

@Lee & @rpaul: See the Flash Player Help for access to the Settings Manager.