Проблема с непрерывным воспроизведением на аудиоплеере HTML5 со страницами, загруженными из Infinite Scroll - PullRequest
Новая
       2

Проблема с непрерывным воспроизведением на аудиоплеере HTML5 со страницами, загруженными из Infinite Scroll

0 голосов
/ 23 января 2012

Я создаю сайт с 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();
    };

Плагины, используемые на сайте: Isotope, Infinite Scroll и .mb_miniplayer

Первые 10 песен (стр. 1) работают так, как они должны - в 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);

    });

1 Ответ

0 голосов
/ 24 января 2012

Как вы получаете Infinite Scroll для загрузки большего количества данных? Я просмотрел вашу страницу в Chrome - было отображено 9 треков, но я не мог вызвать больше, чтобы показать, что они работают правильно ..

Вопрос из-за того, что вы взглянете на ваш код, будет ли динамически срабатывать конструктор miniPlayer, показанный ниже, при добавлении новых элементов .audio в Infinite Scroll? 

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