Play each track at specific time position from a playlist

108 views Asked by At

I want users to be able, to continue a track from where they paused or stopped it last time. I save a users key into a cookie, and store the chosen tracks and elapsed times into db. Then before a activated song is going to play the current time should be set at the retrieven elapsed time:

ie. User lately ilstened to these two songs

song1.mp3n, stopped at 2 sec

song3.mp3 stopped at 100 sec

I found some information at. Play song at specific time position from a playlist

I came up with the following code:

$jplay= <<<EOD
var jp = $('#jquery_jplayer_1pl');
jp.on($.jPlayer.event.setmedia,  function(e){
    // For first track (0) - 2 sec, second track (1) - 3 sec, etc.
    //var time = myPlaylist.current + {$time_elapsed};
    var time = {$time_elapsed};

    // Jump to desired time
    setTimeout(function(){ 
       jp.jPlayer( "play", time); 
    }, 100);
});
EOD;

But this only works with single player version, unless the last track, the user listended to, could be activated or played automatically. Otherwise every song strts at the same time position.

Therefore I think I could use "myPlaylist.play(0);" or "myPlaylist.play(2);", but I cannot find out how.

To be more precise, I want to start several tracks at different elapsed time positions, when they are activated.

Thanks.

1

There are 1 answers

0
taifunorkan On

To make this work for the playlist player version of jplayer, after days I found out the following solution myself, based on jquery and ajax.

$("#jquery_jplayer_1pl").bind($.jPlayer.event.setmedia, function(event) {

    $.ajax({
        type: "GET",
        url: 'media-progress-ajax-funcs1.php',
        data: {
            guid: myPlaylist.playlist[myPlaylist.current].mp3, 
            bkmk_key: '<?php echo $bkmk_key; ?>', 
        },
        contentType: "application/json; charset=utf-8",           
        dataType: "json",
        success: function(response) {
            playtrack(response['timeElapsed']);
        }
    });
});

function playtrack(elapsed) {
    if (elapsed) {
        var jp = $('#jquery_jplayer_1pl');
        var time = parseInt(elapsed);
        // Jump to desired time
        setTimeout(function(){ 
           jp.jPlayer( "pause", time);
        }, 100);
    }
}

Explanation:

        data: {
            guid: myPlaylist.playlist[myPlaylist.current].mp3, 
            bkmk_key: '<?php echo $bkmk_key; ?>', 
        }

The variable bkmk_key is derived from a cookie and unique for a cetain user. The ajax function script 'media-progress-ajax-funcs1.php' is searching for the userkey and corresponding media filename (guid) the user has paused after a certain time (elapsed time from event.jPlayer.status.currentTime) and returns the elapsed time value if the media is set (event:setmedia). It will start playing by clicking play from the latest position, so the user has not to search for it.

I do not mention howto get the elapsed time, after the player is paused, and store it into the database. If you are interested in this part of my code you will have to ask.

I hope that someone finds this helpful.