jPlayer不播放播放列表对象的全局声明中的歌曲

jPlayer not playing songs on playlist object's global declaration

本文关键字:声明 全局 jPlayer 播放 播放列表 对象      更新时间:2023-09-26

这是我的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中排队。播放列表的数组。但是,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的范围,我还尝试了创建静态属性和方法的手,但这并没有得到任何帮助。我就是弄不清楚出了什么问题,更不用说寻找具体的解决办法了。

谁能指出我哪里错了,在这种情况下能做些什么?

<

解决方案/strong>

您需要将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来初始化播放列表对象。这招真管用!