我正在构建一个网站,每个页面上有20个单歌曲音频播放器。我的代码是在每首歌的结尾播放下一首可见的歌。它在初始页面上运行良好,但一旦Paul Irish的无限滚动加载新页面,代码就无法正常工作。它不播放下一首歌,而是在页面上随机播放一首歌。
我注意到它经常播放一首9首歌曲的模式。玩家是:
https://github.com/pupunzi/jquery.mb.miniAudioPlayer
我使用的代码是:
$(".audio").mb_miniPlayer({
width:210,
height:34,
inLine:false,
onEnd:playNext
});
var $audios = $('.audio');
function playNext(idx) {
var actualPlayer=$audios.eq(idx),
$filteredAtoms = $container.data('isotope').$filteredAtoms,
isotopeItemParent = actualPlayer.parents('.isotope-item'),
isoIndex = $filteredAtoms.index( isotopeItemParent[0] ),
nextIndex = ( isoIndex + 1 ) % $filteredAtoms.length;
$filteredAtoms.eq( nextIndex ).find('.audio').mb_miniPlayer_play();
};
该网站使用的插件:同位素、无限卷轴和.mb_miniplayer
前10首歌曲(第1页)在FF和safari。。。其余的歌曲没有。如果你点击前10首歌曲中的一首的末尾,你会看到它进入下一首可见的歌曲,无论激活了什么过滤器,但在第二页和第三页,它会播放一首随机歌曲。
网站是:点击这里
我仍然在处理这个网站的bug,但这是一个我似乎无法弄清楚的问题。
这是我的无限滚动代码:
var $container = $('#container');
$container.isotope({
itemSelector : '.square'
});
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.square', // selector for all items you'll retrieve
animate : false,
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
var $newElements = $(newElements);
$newElements.find(".audio").mb_miniPlayer({
width:210,
height:34,
inLine:false,
onEnd:playNext
});
var $audios = $('.audio');
function playNext(idx) {
var actualPlayer=$audios.eq(idx),
$filteredAtoms = $container.data('isotope').$filteredAtoms,
isotopeItemParent = actualPlayer.parents('.isotope-item'),
isoIndex = $filteredAtoms.index( isotopeItemParent[0] ),
nextIndex = ( isoIndex + 1 ) % $filteredAtoms.length;
$filteredAtoms.eq( nextIndex ).find('.audio').mb_miniPlayer_play();
};
// add hover events for new items
bindSquareEvents( $newElements );
setTimeout(function() {
$container.isotope('insert', $newElements );
}, 1000);
});
如何让Infinite Scroll加载更多数据?我在Chrome中查看了你的页面-显示了9首曲目,但我无法触发更多曲目来测试它们是否正常工作。。
浏览代码后的问题是,当Infinite Scroll添加新的.audio
元素时,下面的miniPlayer构造函数会动态启动吗?
$(".audio").mb_miniPlayer({
width:210,
height:34,
inLine:false,
onEnd:playNext
});