jPlayer not playing songs on playlist object's global declaration

Question

Here is my js:

$(document).ready(function(){
    var cssSelector = {
        jPlayer: "#jplayer_N",
        cssSelectorAncestor: "#jp_container_N"
    };

    var playlist = [];

    var options = {
        playlistOptions: {
            enableRemoveControls: true,
            autoPlay: true
        },
        swfPath: "js/jPlayer",
        supplied: "webmv, ogv, m4v, oga, mp3",
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
    };

    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

    function loadSong(){
        var song_artist = findArtist();
        var song_title = findTitle();
        var song_poster = findPoster();      

        myPlaylist.add({
            title: song_title,
            artist: song_artist,
            oga: sessionStorage.getItem("file_url"),
            poster: song_poster
        });

        $(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer,  function(){
            $('.musicbar').removeClass('animate');
            $('.jp-play-me').removeClass('active');
            $('.jp-play-me').parent('li').removeClass('active');
        });

        $(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer,  function(){
            $('.musicbar').addClass('animate');
        });

        $(document).on('click', '.jp-play-me', function(e){
            e && e.preventDefault();
            var $this = $(e.target);
            if (!$this.is('a')) $this = $this.closest('a');

            $('.jp-play-me').not($this).removeClass('active');
            $('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

            $this.toggleClass('active');
            $this.parent('li').toggleClass('active');
            if( !$this.hasClass('active') ){
                myPlaylist.pause();
            }else{
                var i = Math.floor(Math.random() * (1 + 7 - 1));
                myPlaylist.play(i);
            }
        });
    }    
});

On calling loadSong(), I can see that my songs are getting queued in the myPlaylist.playlist array. However, jPlayer just won't play my songs.

Also, somehow, this however seems to work for me:

$(document).ready(function(){
    var cssSelector = {
        jPlayer: "#jplayer_N",
        cssSelectorAncestor: "#jp_container_N"
    };

    var playlist = [];

    var options = {
        playlistOptions: {
            enableRemoveControls: true,
            autoPlay: true
        },
        swfPath: "js/jPlayer",
        supplied: "webmv, ogv, m4v, oga, mp3",
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
    };

    function loadSong(){
        var song_artist = findArtist();
        var song_title = findTitle();
        var song_poster = findPoster();      

        var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

        myPlaylist.add({
            title: song_title,
            artist: song_artist,
            oga: sessionStorage.getItem("file_url"),
            poster: song_poster
        });

        $(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer,  function(){
            $('.musicbar').removeClass('animate');
            $('.jp-play-me').removeClass('active');
            $('.jp-play-me').parent('li').removeClass('active');
        });

        $(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer,  function(){
            $('.musicbar').addClass('animate');
        });

        $(document).on('click', '.jp-play-me', function(e){
            e && e.preventDefault();
            var $this = $(e.target);
            if (!$this.is('a')) $this = $this.closest('a');

            $('.jp-play-me').not($this).removeClass('active');
            $('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

            $this.toggleClass('active');
            $this.parent('li').toggleClass('active');
            if( !$this.hasClass('active') ){
                myPlaylist.pause();
            }else{
                var i = Math.floor(Math.random() * (1 + 7 - 1));
                myPlaylist.play(i);
            }
        });
    }    
});

But, the reason I can't use this is, every time I call the loadSong() function, a new myPlaylist object gets created every single time allowing me to play only one song at a time. As I'm trying to generate a playlist, I'd want to have a static/global (not exactly sure what to call it) instance of myPlaylist object using which I would add songs to the playlist.

According to this I should not have any problem. Also, just to be sure about the scope of myPlaylist, I also tried my hand on creating static properties and methods and this, but that did not turn out to be of any help as well. I'm just not able to figure out what's wrong, leave alone working for a concrete solution.

Can anyone please point out as to where I'm going wrong and what can be done in that case?

Answer 1

Apologies for the late reply.

Thank you @Gyrocode.com for your prompt reply but your solution generated the same results as mentioned in my question.

What worked for me was:

$(document).ready(function(){
    var cssSelector = {
        jPlayer: "#jplayer_N",
        cssSelectorAncestor: "#jp_container_N"
    };

    var playlist = [];

    var options = {
        playlistOptions: {
            enableRemoveControls: true,
            autoPlay: true
        },
        swfPath: "js/jPlayer",
        supplied: "webmv, ogv, m4v, oga, mp3",
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
    };

    var myPlaylist = null;

    function loadSong(){
        var song_artist = findArtist();
        var song_title = findTitle();
        var song_poster = findPoster();      

        if(myPlaylist == null)
            myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

        myPlaylist.add({
            title: song_title,
            artist: song_artist,
            oga: sessionStorage.getItem("file_url"),
            poster: song_poster
        });

        $(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer,  function(){
            $('.musicbar').removeClass('animate');
            $('.jp-play-me').removeClass('active');
            $('.jp-play-me').parent('li').removeClass('active');
        });

        $(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer,  function(){
            $('.musicbar').addClass('animate');
        });

        $(document).on('click', '.jp-play-me', function(e){
            e && e.preventDefault();
            var $this = $(e.target);
            if (!$this.is('a')) $this = $this.closest('a');

            $('.jp-play-me').not($this).removeClass('active');
            $('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

            $this.toggleClass('active');
            $this.parent('li').toggleClass('active');
            if( !$this.hasClass('active') ){
                myPlaylist.pause();
            }else{
                var i = Math.floor(Math.random() * (1 + 7 - 1));
                myPlaylist.play(i);
            }
        });
    }    
});

That's it. Simply added an if to initialize the playlist object if not already initialized. And it worked like a charm!