Доброго времени суток. К сожалению не силён ещё в магии 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();
});
});