Использую плагин
audio.js
к нему есть такая
документация
У меня на одной странице несколько плейлистов. Не понимаю как их разделить?
При выборе треков из второго плейлиста, они начинают воспроизводится в плеере номер 1, а должны в плеере номер 2
Пример
видео, при клике на треки из второго плейлиста, они воспроизводятся в верхнем плеере
<div class="audio"><audio src="/avtoinform/timofeev_piterwave.mp3" preload="auto" /></div>
<ol class="playlists">
<li><a href="#" data-src="/avtoinform/timofeev_piterwave.mp3">Тимофеев</a></li>
<li><a href="#" data-src="/avtoinform/Nutrilon_piterwave.mp3">Нутрилон</a></li>
</ol>
<div class="audio"><audio src="/avtoinform/nositeli/1.mp3" preload="auto" /></div>
<ol class="playlists">
<li><a href="#" data-src="/avtoinform/nositeli/1.mp3">Американка 1</a></li>
<li><a href="#" data-src="/avtoinform/nositeli/2.mp3">Американец 2</a></li>
</ol>
и перед /body такой код
<script>
$(function() {
// Setup the player to autoplay the next track
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');
audio.load($('a', next).attr('data-src'));
audio.play();
}
});
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
audio.load($('a', this).attr('data-src'));
audio.play();
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
// back arrow
} else if (unicode == 37) {
var prev = $('li.playing').prev();
if (!prev.length) prev = $('ol li').last();
prev.click();
// spacebar
} else if (unicode == 32) {
audio.playPause();
}
})
});
</script>
