Infinite Scrollからページを読み込んだhtml5オーディオプレーヤーの連続再生で問題が発生する

Question

各ページに20のシングルソングのオーディオプレーヤーを持つサイトを構築しています。私が持っているコードは、各曲の終わりに次の目に見える曲を演奏することを意図しています。最初のページではうまく動作しますが、ポールアイルランドの無限スクロールで新しいページが読み込まれると、コードは正しく動作しません。次の曲を再生する代わりに、ページ上でランダムな曲を再生します。

私は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やサ​​ファリのように動作します...残りの曲はそうではありません。最初の10曲の1曲目の最後をクリックすると、どのフィルタがアクティブであるかにかかわらず、次に見える曲に移動しますが、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トラックが表示されましたが、正常に動作するかどうかを確認するためには、より多くのトリガーを表示できませんでした。 Infinite Scrollによって追加されましたか？

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