jPlayer不播放播放列表对象的全局声明中的歌曲
jPlayer not playing songs on playlist object's global declaration
这是我的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
成为全局变量。
演示strong>
很抱歉回复晚了。
谢谢你@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来初始化播放列表对象。这招真管用!
相关文章:
- 如何将变量声明为全局变量
- 如何将变量声明为全局变量?用case foreach?Javascript
- Javascript:如何声明非全局静态方法
- 返回语句后的函数声明全局变量不会被覆盖
- 为什么Javascript代码打印'未定义'即使变量被声明为全局变量
- 如何从选择菜单选项动态声明全局变量
- 声明全局 jquery 对象
- 声明全局变量
- 是否有任何选项可以在煎茶触摸中声明全局变量
- 如何将值从一个函数传递到另一个具有对象的函数,而无需在 JS 中声明全局变量
- 如何在不声明全局变量的情况下将值从一个函数传递到另一个函数?
- 如何从函数内部声明全局变量
- 在页面初始化时声明全局变量
- 如何在javascript中正确声明全局变量
- 是否可以在Node/Express 4.0中声明全局变量?
- Javascript:在一个脚本中声明全局变量,并在另一个脚本中使用它
- 如何使用JS声明全局变量
- 有没有一种方法可以让webpack知道是否没有声明全局
- 在 .js 文件中声明全局变量是否不好
- 如何在外部js文件中声明全局变量?