Resume playback at play position and playlist item on page change

[Lucas Randazzo]

Hi. First of all thanks to the developers of jPlayer for this
wonderfull script.

I've been browsing for an solution on how to make the player
automatically resume playback at the exact position and track as you
browse through the site, kind of like the site bandcamp.com does. I
didn't find a straight answer so I slightly modified the script on the
second demo file (the one with playlist) to allow this.

I know that the way I coded it is probably not the best way of
accomplishing this, but I tried to do it as quickly as possible since
I don't have much time for this particular project. I decided to post
it in here just in case someone like me is browsing for the same
answer. By the way I am not an expert developer so once again forgive
any redundances.

The way I aproached this is by storing the values of "playedTime" and
"playItem" as text inside invisible divs, and by using the
"window.onbeforeunload" event, store this values in 2 different
cookies (using the jQuery Cookie plugin). Then when the script loads
again it takes up the values of this cookies and uses them to change
the "playHeadTime" and to set the "playItem" var.

Heres the full script code:
(I'm using jQuery.noConflict because this script is actually part of a
wordpress template)
"//OMBU MOD" is a comment to remind me what part of the code I changed
myself.


$j=jQuery.noConflict();

$j(document).ready( function() { initScripts(); } );

window.onbeforeunload = function(e) { //OMBU MOD
$j.cookie("mp3player_pos", $j("#OS_playedTime").text(), { path:
'/', expires: 7 });
$j.cookie("mp3player_playItem", $j("#OS_playItem").text(), { path:
'/', expires: 7 });
}

function initScripts() {


if ($j.cookie("mp3player_playItem") != null){ //OMBU MOD
var playItem = parseInt($j.cookie("mp3player_playItem"));
} else {
var playItem = 0;
}

var myPlayList = [
{name:"Hidden",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-02-
Hidden.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-02-
Hidden.ogg"},
{name:"Lentement",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-03-
Lentement.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-03-
Lentement.ogg"},
{name:"Lismore",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-04-
Lismore.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-04-
Lismore.ogg"},
{name:"The Separation",mp3:"http://www.miaowmusic.com/audio/mp3/
Miaow-05-The-separation.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/
Miaow-05-The-separation.ogg"},
{name:"Beside Me",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-06-
Beside-me.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-06-
Beside-me.ogg"},
{name:"Bubble",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-07-
Bubble.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-07-
Bubble.ogg"},
{name:"Stirring of a Fool",mp3:"http://www.miaowmusic.com/audio/mp3/
Miaow-08-Stirring-of-a-fool.mp3",ogg:"http://www.miaowmusic.com/audio/
ogg/Miaow-08-Stirring-of-a-fool.ogg"},
{name:"Partir",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-09-
Partir.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-09-
Partir.ogg"},
{name:"Thin Ice",mp3:"http://www.miaowmusic.com/audio/mp3/Miaow-10-
Thin-ice.mp3",ogg:"http://www.miaowmusic.com/audio/ogg/Miaow-10-Thin-
ice.ogg"}
];

// Local copy of jQuery selectors, for performance.
var jpPlayTime = $j("#jplayer_play_time");
var jpTotalTime = $j("#jplayer_total_time");


$j("#jquery_jplayer").jPlayer({
ready: function() {
displayPlayList();
playListInit(false); // Parameter is a boolean for autoplay.
$j("#jquery_jplayer").jPlayer("playHeadTime",
$j.cookie("mp3player_pos")); //OMBU MOD
},
oggSupport: true
})
.jPlayer("onProgressChange", function(loadPercent,
playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
jpPlayTime.text($j.jPlayer.convertTime(playedTime));
jpTotalTime.text($j.jPlayer.convertTime(totalTime));
$j("#OS_playedTime").text(playedTime); //OMBU MOD
})
.jPlayer("onSoundComplete", function() {
playListNext();
});


$j("#jplayer_previous").click( function() {
playListPrev();
$j(this).blur();
$j("#OS_playItem").text(playItem); //OMBU MOD
return false;
});

$j("#jplayer_next").click( function() {
playListNext();
$j(this).blur();
$j("#OS_playItem").text(playItem); //OMBU MOD
return false;
});

function displayPlayList() {
$j("#jplayer_playlist ul").empty();
for (i=0; i < myPlayList.length; i++) {
var listItem = (i == myPlayList.length-1) ? "<li
class='jplayer_playlist_item_last'>" : "<li>";
listItem += "<a href='#' id='jplayer_playlist_item_"+i+"'
tabindex='1'>"+ myPlayList[i].name +"</a></li>";
$j("#jplayer_playlist ul").append(listItem);
$j("#jplayer_playlist_item_"+i).data( "index",
i ).click( function() {
var index = $j(this).data("index");
if (playItem != index) {
playListChange( index );
} else {
$j("#jquery_jplayer").jPlayer("play");
}
$j(this).blur();
return false;
});
}
}

function playListInit(autoplay) {
if(autoplay) {
playListChange( playItem );
} else {
playListConfig( playItem );
}
}

function playListConfig( index ) {

$j("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");

$j("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
playItem = index;
$j("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3,
myPlayList[playItem].ogg);
$j("#OS_playItem").text(playItem); //OMBU MOD
}

function playListChange( index ) {
playListConfig( index );
$j("#jquery_jplayer").jPlayer("play");
$j("#OS_playItem").text(playItem); //OMBU MOD
}

function playListNext() {
var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
playListChange( index );
$j("#OS_playItem").text(playItem); //OMBU MOD
}

function playListPrev() {
var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
playListChange( index );
$j("#OS_playItem").text(playItem); //OMBU MOD
}


}


#OS_playItem and #OS_playedTime are divs I added to the original
demo-02.htm markup.

I hope this helps.

[Lucas Randazzo]

By the way this actually works.

> $j("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_curren t").parent().removeClass("jplayer_playlist_current");
>
> $j("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").pa rent().addClass("jplayer_playlist_current");

[backdoor]

Hey I am not able to get this.......have you used any other plugin?

[Josh Dardis]

Do you have this WORKING?! Please respond if you do!!! 

[Mark Panaghiston]

That code is pretty old now. That was for jPlayer 1.

You'll be able to do similar for jPlayer 2 of course, but the syntax will have changed.

[Moose]

I have done this for a paying client.  Thanks Mark for the developer wanted forum, the rich toolset and fantastic support.

They have a wordpress site and needed mobil support and cross browser with flash fall back. My client found jPlayer and posted for help in developer wanted. I contracted with them thru that forum.

I modified jPlayer 2.2.0 and I am no moving it to 2.3.0 to allow for the user to return to the site and be directed to the playlist and playlist item with the playhead positioned at the last know listened point with auto play where supported.  So they have multiple playlists for database with the added functionality to jPlayer to automatically resume play at the exact position and track as last browser visit from same device.

No user login required.

Mark this could be a suggestion for future feature enhancement.  I had to add an event handler to update the data needed for resume and then a few functions to manage the data plus a hook in the document ready of the page after jplayer instance to check for resume data and jump to item and move playhead.  Could be rolled into an option in jPlayer to resumePlay with playlist support.

[Mark Panaghiston]

Sounds interesting moose.
So are you using the new local data feature of browsers with a cookie fallback?

You talk of databases, but we will want to keep jPlayer completely client-side... Just in case there is a server-side part of this puzzle... But it does sound like you're using the local data.