0

各ページに 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 曲 (page1) は、FF とサファリで想定どおりに機能します... 残りの曲は機能しません。最初の 10 曲のいずれかの最後までクリックすると、アクティブなフィルターに関係なく、次の表示されている曲に移動することがわかりますが、2 ページ目と 3 ページ目ではランダムな曲が再生されます。

ウェブサイトは次のとおりです。ここをクリック

私はまだサイトのバグに取り組んでいますが、これは私が理解できないようです.

ここに私の無限スクロールコードがあります:

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

    });
4

1 に答える 1

0

無限スクロールでより多くのデータをロードするにはどうすればよいですか? Chrome であなたのページを表示しました - 9 つのトラックが表示されましたが、正常に動作することをテストするためにそれ以上のトラックを表示することはできませんでした..

.audioコードをちらっと見てからの質問ですが、無限スクロールによって新しい要素が追加されると、以下の miniPlayer コンストラクターが動的に起動しますか?

$(".audio").mb_miniPlayer({
    width:210,
    height:34,
    inLine:false,
    onEnd:playNext
});
于 2012-01-23T21:02:21.500 に答える