Trouble with continuous play on html5 audio player with pages loaded from Infinite Scroll

问题

I am building a site with 20 single song audio players on each page. The code I have is meant to play the next visible song at the end of each song. It works fine on the initial page, but once Paul Irish's infinite scroll loads new pages, the code does not work properly. Instead of playing the next song, it plays a random song on the page.

I have noticed a pattern of it often playing a song 9 songs behind. The player is:

https://github.com/pupunzi/jquery.mb.miniAudioPlayer

The code I am using is:

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

Plugins the site uses: Isotope, Infinite Scroll, and .mb_miniplayer

The first 10 songs(page1) work as they are suppose to--in FF and safari... The rest of the songs do not. if you click to the end of one of the first 10 songs, you will see it goes to the next visible song, regardless of what filters are active, but on the 2nd and third page, it plays a random song.

The website is: click here

I am still working on bugs with the site, but this is the one I cant seem to figure out.

Here is my Infinite Scroll Code:

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

    });

回答1:

How do you get Infinite Scroll to load more data? I viewed your page in Chrome - 9 tracks were displayed but i couldn't trigger more to appear to test they worked correctly..

Question from glancing at your code, will the miniPlayer constructor below fire dynamically as new .audio elements are added by Infinite Scroll?

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

来源：https://stackoverflow.com/questions/8977541/trouble-with-continuous-play-on-html5-audio-player-with-pages-loaded-from-infini