jPlayer stops on calling jQuery.load() method to refresh content on chrome but works on firefox

Question

I am using jPlayer to play audio. We need the play to be uninterrupted. For this, we are using the jQuery.load() method to load page content and replacing the content on the page.

We are not refreshing the jPlayer content in any way.

The code works fine in firefox and jPlayer plays audio without interruption. But on chrome and safari, jPlayer stops and then restarts just after the execution of the jquery load method.

Also, when I run the code on local machine, their is no interruption in any browser. Only when I run the code on the server their is an interruption.

We need the music to be without interruptions.

My code is as below:

function loadContent(pagePath) {
    //Method called on menu click to load content without page refresh
    //Loading the said page (pagePath - relative path of page)
    jQuery('#containerDiv').fadeOut(200, function() {
    jQuery('#waitingDiv').show();
        jQuery(this).empty();
        jQuery(this).load(pagePath, function() {
        jQuery(this).fadeIn(200, function() {
            jQuery('#waitingDiv').hide();
        });
    });
    });
}

//JPlayer initiation code on first page load
jQuery("#jquery_jplayer_1").jPlayer({
    ready: function () {
        jQuery(this).jPlayer("setMedia", {mp3: '../'+path});
    },
    swfPath: "../swf",
    supplied: "mp3",
    wmode: "window"
});

ANy suggestions?

Thanks Akhilesh Aggarwal

Answer 1

Try moving the JPlayer initiation code above the loadContent function