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

こ雲淡風輕ζ 提交于 2020-01-14 06:21:06

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!