jPlayer无法在播放列表对象的全局声明中播放歌曲

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

SOLUTION

You need to move jPlayerPlaylist initialization and event handlers outside of loadSong and make myPlaylist a global variable.

DEMO

See this jsFiddle for code and demonstration.

Answer 2

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!