Search code examples
javascriptjquerygoogle-chromeaudiojplayer

Cannot bind to JPlayer event on document.ready


I'm using jplayer for playing audio on a webpage, and when the page loads, the inspector and the player get loaded fine, but the bind function does not work. If I call it later from the console then it works fine.

$(document).ready(function(){
    myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
        { mp3: flatplaylist[0] },
        { supplied: "mp3", }
    );
    $("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
    //does not work from here, but will work if I put this in the console.
    $(myCirclePlayer.audio).bind('ended',function (){ playNextFile(); }); 
});

Solution

  • Here's my final code, which works fine.

    var PlayerID = "#jquery_jplayer_1";
    $(window).ready(function(){
        myCirclePlayer = new CirclePlayer(PlayerID,{mp3: 'audio/'+mypl.playlist[0]},{supplied: "mp3",});
        $("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
        $(PlayerID).bind($.jPlayer.event.ended, function (){ playNextFile(); });
    });