从 Infinite Scroll 加载页面的 html5 音频播放器上连续播放的问题

Question

我正在构建一个网站，每个页面上有 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();
    };  

网站使用的插件：Isotope、Infinite Scroll 和 .mb_miniplayer

前 10 首歌曲（第 1 页）按预期工作——在 FF 和 safari 中......其余的歌曲没有。如果您单击前 10 首歌曲中的一首的结尾，您将看到它转到下一首可见歌曲，无论哪些过滤器处于活动状态，但在第 2 和第 3 页上，它会播放一首随机歌曲。

网址是：click here

我仍在处理该网站的错误，但这是我似乎无法弄清楚的错误。

这是我的无限滚动代码：

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);

    });

Answer 1

如何让无限滚动加载更多数据？我在 Chrome 中查看了您的页面 - 显示了 9 首曲目，但我无法触发更多以测试它们是否正常工作..

查看您的代码的问题是，当无限滚动添加新的.audio 元素时，下面的 miniPlayer 构造函数会动态触发吗？

$(".audio").mb_miniPlayer({
    width:210,
    height:34,
    inLine:false,
    onEnd:playNext
});