How exactly do I use the preload function?

[Wurlitzer]

Hi,

Is the preload function supposed to silently load the next track in a
playlist?
I have set the preload parameter to 'auto' in jquery.jplayer.js.

I understand I have to do something like $("#jpID").jPlayer("load");
How do I use this line, exactly, to preload the next track?

Any help is appreciated.

[Mark P]

Hello,

jPlayer itself is only ever playing 1 track. You are referring to a
demo that shows how a playlist could be implemented.

{preload:'auto'} has an effect when you use
jPlayer("setFile",mp3[,ogg]), by immediately beginning the download
and thus preloading the data ready.

The problem with the playlist demo is that setFile is immediately
followed by play so preload has no real effect.

Preload is intended for the case where you have a player on your page
and it does not autoplay.

For you to get the 'next song' to preload, you would have to write
your own Playlist solution. I imagine that using 2 jPlayer instances
would work. Then the 2nd instance could preload, while the current
track plays in the 1st instance. At the end of 1st instance track,
play the 2nd instance and change the 1st instance setFile to the 3rd
track and it preloads while the 2nd instance plays. So you flip back
and forth between the 2 instances.

Best regards,
Mark P.

[Wurlitzer]

Hi Mark, thanks for the reply.

"Preload is intended for the case where you have a player on your page
and it does not autoplay."

Thanks — I thought it was intended to make the player achieve seamless
playback in a playlist, by preloading the next track each time.
This is useful when the playlist has songs that are mixed together.

[nickharambee]

I am also interested in this functionality, i.e. seamless playback in
a playlist using the preload feature. I am not sure though how to
implement this along the lines Mark mentions. I wonder if someone
would be able to help out with this.

Thanks

Nick

[Bitography]

It does. It actually does anything you want it to. It's an API that
works. I am creating a game with it. I know that doesn't help your
cause per se -- do some more searching and you'll get it.

[Bitography]

A simple approach is to start by doing what Mark P said there, adding
another named div, for example <div id="song_2"></div> to your html.
In your javascript, in the jPlayer ready function, load #song_2 using
preload set to auto (for example) and load the original #jquery_player
div (or whatever you call it, perhaps song_1) with an onSoundComplete
function that plays #jpCache when eventually triggered. The
onSoundComplete can be set up differently on each div to get you a
waterfall effect. Good luck!

[nickharambee]

I'm struggling to get my head around this one. Are you suggesting I
have a separate player for each track I want to play on the page?
What I'm looking for is a playlist where tracks are all preloaded, so
that they are ready for a seamless transition.

If you are not suggesting separate players, I'm not sure exactly how
this would work. Specifically if I add the following divs to my page:

<div id="song_2"></div>
<div id="song_3"></div>
<div id="song_4"></div>

do I actually put any code in the divs, and if not, how do they link
to the 2nd, 3rd and 4th files?

Also I assume I would need to add a separate jPlayer ready function
for each of the new divs, i.e.

$("#jsong_2").jPlayer("onSoundComplete", function(){
ready: function() {
displayPlayList();
playListInit(true); // Parameter is a boolean for autoplay.
},
oggSupport: true, preload: "auto", onSoundComplete
})

but i'm not sure.

Finally I can see where the onSoundComplete needs to go (I've started
to enter it in the example above), but can't work out to code play
#jpCache.

I'd be grateful for a bit more steering in the right direction.

Thanks

Nick

[Bitography]

Hi Nick, just to clarify things a little here: The javascript
functions to set up a sound are made to call a div in your html which
acts as a placeholder. Never put anything in the div and always make
sure this div stays visible and isn't moved around. So if you had a
div in your html as a sound container <div id="song1"></div> then in
your javascript you would talk directly to this div by something like $
("#song1").jPlayer ETCETERA. And yes, a separate player for each sound
if you want them all loaded into memory OR you can load one, when it's
finished, clear it out and load the next into the same div. This is
slower, though, so try what happyworm did in their demo of multiple
instance http://www.happyworm.com/jquery/jplayer/latest/demo-03.htm

[nicks...@me.com]

Thanks. I think I am slowly getting there. The part I am now stuck on is that in the demo page of the multi instanced player you linked to each div/instance has the mp3 and ogg audio file defined in it's own section of the JavaScript code (sorry I'm not sure what the technical term for this is).  I can now see how the empty divs for tracks 2, 3 and 4 would work. However in the playlist example, all the tracks are defined in the var myPlayList section. Given that I would need a different instance for each track, how do I get all the tracks in one playlist?

--
You received this message because you are subscribed to the Google Groups "jPlayer: the CSS styleable jQuery audio player plugin" group.
To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

[Bitography]

If your definition of seamless is the same as mine, you need to use
either a bunch of instances of jPlayer to reference each track, yes.
You might be able to devise a clever way with only a couple instances
of jPlayer (as demo'd above) but you'd perhaps change the
onSoundComplete and load functions back and forth after each song to
get the next one ready -- but this wouldn't work if you wanted
anything other than a sequential playlist -- which isn't what you
want.

Then again, if you don't need it actually seamless, the jPlayer
playlist demo is what I refer to in my scripts...
http://www.happyworm.com/jquery/jplayer/latest/demo-02.htm

Anyway, sorry I can't help further at this time. I've never tried this
although I have tried loading a bunch of short sounds which seems to
work alright. Hey, if you do create a truly seamless playlist solution
please let me know! :)

[nickharambee]

Thanks for the response. I am still unclear about whether what I am
looking for is possible. Essentially I just want to see one playlist
on the page, but with all tracks preloading in sequence, one, two,
three, etc., so that there is no or minimal gap between songs (this is
what I mean by seamless).

In the multiple instances demo there are two players on the page, but
there are also two divs with all the html for each player. I thought
you were suggesting I enter empty divs for tracks 2,3, and 4 and then
have separate javascript for each of these players to specify
load:auto, the URL of each track, etc. But if this is the case then
I'm thinking it wouldn't be possible to get all these tracks to show
in the one playlist, which is what I want.

I hope this is clear!

Nick

[Bitography]

I think you can either do this kind of playlist:
http://www.happyworm.com/jquery/jplayer/latest/demo-02.htm

Or if you want no-gap, yes exactly, you'll have to do the multiple
divs "hack" (sorry) and figure it out with 10-20 divs. I recommend
using the playlist demo code and loading them individually into one
div like they do -- because preloading 10-20 full-length songs is
going to bog the systems anyway. Good luck!

[Mark P]

Hello Nick,

The current jPlayer cannot do what you want easily. jPlayer does
everything through a single instance of an <audio> or Flash fallback,
which means the preload only works with the current track specified by
the setFile.

Bitography suggests that you use 2 jPlayer instances to solve your
problems. Here, the 1st instance could deal with the ODD tracks and
the 2nd with the EVEN tracks. However, you would have to disable the
default interface ID association and write your own click handlers for
play, pause, stop and the progress bars. Here, you want to direct the
actions to the 1st instance while playing an ODD track, the 2nd while
playing an even track. The volume controls should affect both.

The demo code for demo 2 is written to work with a single instance.
You'd need to write your code to switch between the 2 instances.

I suggest that you just accept the short delay between tracks. If you
try and use the 2 instances, then I would expect problems on the iPad.
It can only play 1 at a time, unlike normal browsers, and trying to
preload 1 instace while playing the other may well break it.

I will consider this problem while looking at the next version. In
theory, the HTML5 <timed> track may be the solution to this particular
issue. Support for the <timed> element and how each browser deals with
preloading the individual tracks is still untested.

Best regards,
Mark P

[nicks...@me.com]

Thanks for your thorough response Mark. Looks likes it's all a bit complicated for me as it stands. If you could look into this functionality for future releases that would be great.

Nick