Javascript jPlayer未在播放列表对象上播放歌曲'；全球宣言

这是我的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);
            }
        });
    }    
});

调用loadSong（）时，我可以看到我的歌曲正在myPlaylist.playlist数组中排队。不过，jPlayer不会播放我的歌曲

然而，不知何故，这似乎对我也适用：

$(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);
            }
        });
    }    
});

但是，我不能使用它的原因是，每次调用loadSong（）函数时，都会创建一个新的myPlaylist对象，使我一次只能播放一首歌曲。当我试图生成一个播放列表时，我希望有一个myPlaylist对象的静态/全局（不确定如何称呼它）实例，我可以使用它将歌曲添加到播放列表中

据我所知，我应该没有任何问题。另外，为了确定myPlaylist的范围，我也尝试了我的手和，但结果也没有任何帮助。我只是无法找出问题所在，更别说为具体的解决方案而努力了

有人能指出我哪里出了问题，在这种情况下能做些什么吗

解决方案

您需要将

jPlayerPlaylist

初始化和事件处理程序移动到

loadSong

之外，并使

myPlaylist

成为全局变量

演示

有关代码和演示，请参阅

解决方案

您需要将

jPlayerPlaylist

初始化和事件处理程序移动到

loadSong

之外，并使

myPlaylist

成为全局变量

演示

---

请参阅，以获取代码和演示。

对于延迟回复表示歉意

感谢@Gyrocode.com的及时回复，但您的解决方案产生的结果与我的问题中提到的相同

对我起作用的是：

$(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);
            }
        });
    }    
});

---

就这样。如果播放列表对象尚未初始化，只需添加一个if来初始化播放列表对象。它就像一个符咒

对迟来的回复表示歉意

感谢@Gyrocode.com的及时回复，但您的解决方案产生的结果与我的问题中提到的相同

对我起作用的是：

$(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);
            }
        });
    }    
});

就这样。如果播放列表对象尚未初始化，只需添加一个if来初始化播放列表对象。它就像一个符咒