在html5音頻播放器上連續播放有麻煩，並且從Infinite Scroll加載了頁面

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

該網站使用的插件：同位素，無限滾動和.mb_miniplayer

前10首歌曲（第1頁）在FF和safari中正常工作，其余的則無效。 如果單擊到前10首歌曲之一的末尾，則無論激活了什么過濾器，它都會轉到下一首可見歌曲，但是在第二和第三頁上，它將播放隨機歌曲。

網站是： 點擊這里

我仍在研究該網站的錯誤，但這是我似乎無法找出的錯誤。

這是我的無限滾動代碼：

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條曲目，但我無法觸發更多的曲目來測試它們是否正常工作。

瀏覽代碼會產生疑問，隨着Infinite Scroll添加新的.audio元素，下面的miniPlayer構造函數會動態.audio嗎？

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