jPlayer playing two media files

Question

I am attempting to piece together a jPlayer example that plays two audio files, one right after another.

I need to have full event control, so i decided not to use the playlist option, unless somebody can give me an example of having a way of controlling when the events fire, something like:

• first media 'before' function
• first media 'after' function
• second media 'before' function
• second media 'after' function

My example below is using a global variable in the "ended:" function and seems pretty clumsy.

Does anybody have a better suggestion how i might accomplish this? here is my working example of using the global variable:

$(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            console.log('ready function.');
        },
        ended: function()   {
                console.log('ending function starting.');
                var player = $("#jquery_jplayer_1");
                player.jPlayer("stop");
                player.jPlayer("clearMedia");
                player.jPlayer("setMedia", { 
                    wav: globalParmTwo
                }); 
                player.jPlayer("play", 0);
                globalParmTwo = null;
        },
        loop:  false,     // added to remove the if condition
        supplied: "wav, oga",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
    });
});

var globalParmTwo = null;
function komPare(parmOne, parmTwo)  {
    globalParmTwo = parmTwo;
    var player = $("#jquery_jplayer_1");
    player.jPlayer("stop");
    player.jPlayer("clearMedia");
    player.jPlayer("setMedia", { 
        wav: parmOne
    }); 
    player.jPlayer("play", 0);
 }

And here my working example using the playlist, which seems like a better solution, assuming there is some way to fire specific functions at specific times:

var myPlaylist = null;
$(document).ready(function(){

    myPlaylist = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_N",
        cssSelectorAncestor: "#jp_container_N"
    }, []
    , {
        playlistOptions: {
            enableRemoveControls: true
        },
        supplied: "wav, ogv",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
    });
    $('.jp-playlist').hide();
    myPlaylist.option("autoPlay", true);
});

function komPare(firstMediaUrl, secondMediaUrl) {
    myPlaylist.setPlaylist([
        { wav: firstMediaUrl },
        { wav: secondMediaUrl }
    ]);
};

any suggestions are very appreciated.

UPDATE: i removed an if-condition and put in "loop: false," instead in the first example.

Answer 1

We can bind events to the playlist player, and then use a global media counter. This still uses global variables, but the code is cleaner.

as always, any suggestions are most appreciated.

var myPlaylist = null;
var mediaCounter = null;

$(document).ready(function(){

    myPlaylist = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1"
    }, []   // empty initial playlist
    , {
        playlistOptions: {
            enableRemoveControls: true
        },
        supplied: "ogv",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
    });
        $('#jquery_jplayer_1').bind($.jPlayer.event.ready,
            function(event) {
                console.log('ready.');
            }
        );
        $('#jquery_jplayer_1').bind($.jPlayer.event.loadeddata,
            function(event) {
                console.log('loadeddata ' + mediaCounter++ );
            }
        );
        $('#jquery_jplayer_1').hide();
        $('.jp-playlist').hide();
        $('.jp-controls').hide();
        myPlaylist.option("autoPlay", true);

});

function komPare()  {
    var playlist = [];
    for ( urlName of arguments ) {
        playlist.push( { ogv: urlName } );
    };
    mediaCounter = 0;
    myPlaylist.setPlaylist(playlist);
};