Бьюсь над вопросом как сделать подгрузку плеера для каждого трека в audiojs

Доброго времени суток. К сожалению не силён ещё в магии java-script'а поэтому вопрошаю к обществу за помощью. А вопрос у меня такой, есть такой замечательный скрипт аудио плеера audiojs и надо мне из него сделать плейлист, но вот реализация "из коробки" мне не совсем подходит. А именно – один плеер проигрывает несколько треков, а мне надо чтобы у каждого трека был свой плеер. Для наглядности вот ссылки на примеры.
Это реализация "из коробки": kolber.github.io/audiojs/demos/test6.html
А вот то, что мне надо (я пробовал колдовать, но до конца не получилось – на 3-й трек не переходит), вот ссылка на пример: 192.241.185.13/audiojs
а вот и сам JS-код:
$(function() {
  // Добавляет соответствующий класс и элемент в DOM для корректной работы audiojs
  $('ol li').first().addClass('playing');
  $('<audio src=""></audio>').appendTo('ol li.playing');

  // Инициализация самого плеера и функция autoplay для плейлиста
  var a = audiojs.createAll({
    trackEnded: function() {
      var next = $('ol li.playing').next();
      if (!next.length) next = $('ol li').first();
      next.addClass('playing').siblings().removeClass('playing');
      
      // Здесь я пытаюсь добавить плеер для следующего трека
      // Мне необходимо чтобы в DOM'е плеер для каждого трека находился в соответствующем узле - под названием трека
      // В противном случае все треки будет проигрывать "общим" плеером, как напримере: 
      // Инициализация audiojs необходима для вставки его лэйаута со стилями
      $('.audiojs').remove();
      $('<audio src=""></audio>').appendTo(next);
      var a = audiojs.createAll();
      var audio = a[0];
      
      audio.load($('a', next).attr('data-src'));
      audio.play();
    }
  });

  // Загружает первый трек при загрузке страницы
  var audio = a[0];
  var first = $('ol a').attr('data-src');
  audio.load(first);

  // Загружает трек при клике
  $('ol li').click(function(e) {
    e.preventDefault();
    $(this).addClass('playing').siblings().removeClass('playing');
    $('.audiojs').remove();
    $(this).after('<audio></audio>');
    var a = audiojs.createAll();
    var audio = a[0];
    audio.load($('a', this).attr('data-src'));
    audio.play();
  });
});
  • Вопрос задан
  • 2594 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы