在从无限卷轴加载页面的html5音频播放器上连续播放时出现问题 [英] Trouble with continuous play on html5 audio player with pages loaded from Infinite Scroll

问题描述

我正在每个页面上建立一个包含20个单曲音频播放器的网站。我的代码是为了播放每首歌结尾的下一首可见歌曲。它在初始页面上工作正常，但一旦Paul Irish的无限滚动加载新页面，代码就无法正常工作。它不是播放下一首歌，而是在页面上播放随机歌曲。

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.

我注意到它经常播放一首9首歌曲。玩家是：

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

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

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

前10首歌曲（第1页）按照他们的想法工作 - 在FF和Safari中...其余的歌曲没有。如果您点击前10首歌曲中的一首歌曲的末尾，您将看到它转到下一首可见歌曲，无论哪些过滤器处于活动状态，但在第2页和第3页，它会播放随机歌曲。

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.

该网站是：点击此处

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

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

这是我的无限滚动码：

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

    });

推荐答案

如何获得Infinite Scroll来加载更多数据？我在Chrome浏览器中查看了您的页面 - 显示了9个曲目，但我无法触发更多似乎测试它们是否正常工作..

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..

通过查看代码的问题，将会下面的miniPlayer构造函数是动态触发的，因为新的 .audio 元素是由Infinite Scroll添加的？

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

这篇关于在从无限卷轴加载页面的html5音频播放器上连续播放时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！