CODEWITHSUNDEEP
javascriptjquerygoogle-chromejplayer
jerrygarciuh
jerrygarciuh

Reputation: 21988

Debugging jPlayer Initialization in Chrome only, no network or js errors seen in console

This streaming MP3 player had been working fine for 8 months. It has developed an odd behavior in the last few weeks but only in Chrome- the first click of any "Listen" link anywhere on site produces expected console output and changes to the HTML in player area but stream does not start. No network 404s, 403s etc are seen in console. No JS errors are thrown in console except Flash fallback complaint which has always been thrown despite file being found where it is sought...

This issue is not observed in IE, FF, or Windows Safari.

Live site: http://itsneworleans.com/

Example link:

<a href="#top" ajax-data="/audio/episodes/2014_03_21_587_hello-swelo.mp3" ajax-data-id="587" ajax-data-alt="Happy Hour: Hello Swelo" class="playerLink ">Listen</a>

jPlayer init line 233 of http://itsneworleans.com/js/main.js

$("#jquery_jplayer_1").jPlayer({
        supplied: "mp3",
        swfPath: "http://itsneworleans.com/js/jQuery.jPlayer.2.5.0",
        solution: "html,flash",
        wmode:"transparent",
        errorAlerts: true,
        ended: function () {
            console.log('ended event fired');
            $.getScript('/js/random_show.js.php');
        }
    });

Click function from http://itsneworleans.com/js/main.js line 245:

$("body").on('click', '.playerLink', function() {
    if ($(this).attr('ajax-data')) {
        console.log("Playing " + $(this).attr('ajax-data'));

         ga('send', 'pageview', {'page': $(this).attr('ajax-data'),'title': document.title});
         console.log("Sending to GA " + $(this).attr('ajax-data'));

        $("#jquery_jplayer_1").jPlayer("setMedia", {
            mp3: $(this).attr('ajax-data')
        }).jPlayer("play");
        var chunks = $(this).attr('ajax-data-alt').split(':');
        var title = chunks[0] + ':<br>' + chunks[1];
        $('#playerTitle').html(title);
        $('#poplink').attr('ajax-data', $(this).attr('ajax-data-id'));

         var playtime = $("#jquery_jplayer_1").data("jPlayer").status.currentTime;
         $.ajax({
          type: "POST",
          url: "/inc/pcnter.php",
          data: {e:$(this).attr('ajax-data-id'), t:playtime, p:0}
        });

        if ($('#player').css('display') != 'block') {
            $('#player').css('display', 'block');
            $('#player').animate({"height":"80px"}, 1000);
        }
    }
});

Output:

Playing /audio/episodes/2014_03_21_587_hello-swelo.mp3 main.js:247
Sending to GA /audio/episodes/2014_03_21_587_hello-swelo.mp3 main.js:250
jPlayer 2.5.0 : id='jquery_jplayer_1' : Error!
jPlayer's Flash fallback is not configured correctly, or a command was issued before the jPlayer Ready event. Details: undefined is not a function
Check your swfPath option and that Jplayer.swf is there.
Context: http://itsneworleans.com/js/jQuery.jPlayer.2.5.0/Jplayer.swf

Upvotes: 3

Views: 889

Answers (1)

jerrygarciuh
jerrygarciuh

Reputation: 21988

I added a ready() function with console output. I found it only fired on the second Listen link click.

After some more searching based on that result I found this post:

"check your styles. if your #jquery_jplayer_1 or its parent has display=none, ready event never fires in such browsers as opera or firefox. i mean flash object can't be hidden."

I can't say why it had worked previously but what was happening was that jPlayer's Flash solution was failing to load because my player had display set to none.

So now I have offscreened player via a negative margin-top and instead of animating height I animate margin-top. It's all working now.

Upvotes: 2

Related Questions