jquery jplayer cookie preferences

Question

OK, so I have this pretty cool Mario-themed media player, created by the customization of the immensely powerful jQuery plugin, jplayer.

So, I would like to give the option to the user to choose whether he or she would like to have auto-starting music play in the background of the website.

I have it off by default, as this is supposed to be a business, and even for regular, non-profit sites, music in the background can be very irritating, especially if it's not clear how to start and stop the audio.

Anyway, I'm trying to set up a cookie to do this, using the intuitive jQuery cookie plugin.

Here is the code I'm setting for when the buttons in the modal dialog box are clicked:

 buttons: {
  'Without Music': function() {
   $(this).dialog('close');
   $.cookie('autoPlay', 'no', { expires: 365 * 10 });
  },
  'With Music': function() {
   $(this).dialog('close');
   $.cookie('autoPlay', 'yes', { expires: 365 * 10 });
  }
 }

Now, I'm running a timmer, that's checking every millisecond (yes this can easily be adjusted, but I just want instant results!) for the autoPlay cookie's value, whether it's yes or no:

 setInterval(function() {
  if ($.cookie('autoPlay') == no) {
   displayPlayList();
   playListInit(false); // Parameter is a boolean for autoplay.
  }
 }, 1); // checks every millisecond (i.e. 1/1000 of a second)
  // need to do speed tests, and see if fast checking results in bogged down pages, difference between 1 millisecond and even 100-300 are nearly negligible
 setInterval(function() {
  if ($.cookie('autoPlay') == yes) {
   displayPlayList();
   playListInit(false); // Parameter is a boolean for autoplay.
  }

So, for some reason, when I refresh the page, after selecting yes. The player doesn't autoPlay like it should. Now, I think the problem may be a cause of my conditional statement. But I'm not sure..

UPDATE:

Here is my entire new jplayer.js file, which includes the code that we need to work on for this problem:

$(document).ready(function(){

    $("#jpId").jPlayer( {
      swfPath: "/js"
    });

    var playItem = 0;

    var myPlayList = [
       {name:"SMB Overworld",mp3:"/audio/MushroomKingdomSMB.mp3"}, 
       {name:"SMB Underworld",mp3:"/audio/UnderworldSMB.mp3"}, 
       {name:"SMB Underwater",mp3:"/audio/UnderwaterSMB.mp3"}, 
       {name:"SMW Castle",mp3:"/audio/CastleSMW.mp3"} 
    ];

    // Local copy of jQuery selectors, for performance.
    var jpPlayTime = $("#jplayer_play_time");
    var jpTotalTime = $("#jplayer_total_time");

    $("#jquery_jplayer").jPlayer({
        ready: function() {
            displayPlayList();
            playListInit(false); // Parameter is a boolean for autoplay.
        }
    })
    .jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
        jpPlayTime.text($.jPlayer.convertTime(playedTime));
        jpTotalTime.text($.jPlayer.convertTime(totalTime));
    })
    .jPlayer("onSoundComplete", function() {
        playListNext();
    });

    $("#jplayer_previous").click( function() {
        playListPrev();
        $(this).blur();
        return false;
    });

    $("#jplayer_next").click( function() {
        playListNext();
        $(this).blur();
        return false;
    });

    function displayPlayList() {
        $("#jplayer_playlist ul").empty();
        for (i=0; i < myPlayList.length; i++) {
            var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>";
            listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a></li>";
            $("#jplayer_playlist ul").append(listItem);
            $("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
                var index = $(this).data("index");
                if (playItem != index) {
                    playListChange( index );
                } else {
                    $("#jquery_jplayer").jPlayer("play");
                }
                $(this).blur();
                return false;
            });
        }
    }

    function playListInit(autoplay) {
        if(autoplay) {
            playListChange( playItem );
        } else {
            playListConfig( playItem );
        }
    }

    function playListConfig( index ) {
        $("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
        $("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
        playItem = index;
        $("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
    }

    function playListChange( index ) {
        playListConfig( index );
        $("#jquery_jplayer").jPlayer("play");
    }

    function playListNext() {
        var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
        playListChange( index );
    }

    function playListPrev() {
        var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
        playListChange( index );
    }
    $('#text_music').click(function() {
        $('#jplayer').slideToggle(500);
    });

    $("#player").bind( "clickoutside", function(event){
        if($('#jplayer').is(':visible')) {
            $('#jplayer').slideToggle(500);
        }
    });

    setInterval(function() {

      if($('a#jplayer_playlist_item_0').hasClass('jplayer_playlist_current')) {
       $("#bg_3, #bg_4, #map_4, #sprites_4, #platforms_4, #bg_5, #bg_6, #map_6, #sprites_6, #bg_7, #bg_8, #map_8, #sprites_8, #behindsprites_8").hide();
       $("#bg_1, #bg_2, #map_2, #sprites_2").show();
      };

      if($('a#jplayer_playlist_item_1').hasClass('jplayer_playlist_current')) {
       $("#bg_1, #bg_2, #map_2, #sprites_2, #bg_5, #bg_6, #map_6, #sprites_6, #bg_7, #bg_8, #map_8, #sprites_8, #behindsprites_8").hide();
       $("#bg_3, #bg_4, #map_4, #sprites_4, #platforms_4").show();
      };

      if($('a#jplayer_playlist_item_2').hasClass('jplayer_playlist_current')) {
       $("#bg_1, #bg_2, #map_2, #sprites_2, #bg_3, #bg_4, #map_4, #sprites_4, #platforms_4, #bg_7, #bg_8, #map_8, #sprites_8, #behindsprites_8").hide();
       $("#bg_5, #bg_6, #map_6, #sprites_6").show();
      };

      if($('a#jplayer_playlist_item_3').hasClass('jplayer_playlist_current')) {
       $("#bg_1, #bg_2, #map_2, #sprites_2, #bg_3, #bg_4, #map_4, #sprites_4, #platforms_4, #bg_5, #bg_6, #map_6, #sprites_6").hide();
       $("#bg_7, #bg_8, #map_8, #sprites_8, #behindsprites_8").show();
      };
    }, 1); // checks every millisecond (i.e. 1/1000 of a second)
           // need to do speed tests, and see if fast checking results in bogged down pages, difference between 1 millisecond and even 100-300 are nearly negligible

    setInterval(function() {
        if ($.cookie('autoPlay') === 'no') {
            displayPlayList();
            playListInit(false); // Parameter is a boolean for autoplay.
        }
    }, 1); // checks every millisecond (i.e. 1/1000 of a second)
        // need to do speed tests, and see if fast checking results in bogged down pages, difference between 1 millisecond and even 100-300 are nearly negligible
    setInterval(function() {
        if ($.cookie('autoPlay') === 'yes') {
            displayPlayList();
            playListInit(true); // Parameter is a boolean for autoplay.
        }
    }, 1); // checks every millisecond (i.e. 1/1000 of a second)
        // need to do speed tests, and see if fast checking results in bogged down pages, difference between 1 millisecond and even 100-300 are nearly negligible       
    /*
    $('#jquery_jplayer')
    playListInit(true)
    */
    $('#infobutton').click(function() {
        $('#music_descrip').dialog('open');
}   );
    $('#music_descrip').dialog({
        title: '<img src="/images/text/text_mario_planet_jukebox.png" id="text_mario_planet_jukebox"/>',
        autoOpen: false,
        height: 375,
        width: 500,
        modal: true,
        resizable: false,
        buttons: {
            'Without Music': function() {
                $(this).dialog('close');
                $.cookie('autoPlay', 'no', { expires: 365 * 10 });
            },
            'With Music': function() {
                $(this).dialog('close');
                $.cookie('autoPlay', 'yes', { expires: 365 * 10 });
            }
        }
    });

});
-->

It appears to still have the same problem.. I'm trying to work it out, but if you spot an error before I do, please let me know! :)

Answer 1

You need to compare to a string, like this:

 if ($.cookie('autoPlay') == 'yes') {

Also even if you're checking yes, you're still passing false, it seems like it should be true.

And I would up the interval, 50ms at least, like this overall:

setInterval(function() {
  displayPlayList();
  playListInit($.cookie('autoPlay') === 'yes');
}, 1);

In general though, don't be checking a cookie on an interval at all, make whatever's performing the action both set the cookie and perform the action...only use the cookie when first setting up the player in document.ready.