Привет, вообщем есть на котором надо вывести несколько блоков с песнями
take.ms/jP9Gj, нашел как написать самому плеер на js, написал, но проблема он работает только с первой записью, это понятно, но теперь как правильно сделать чтобы каждый блок плеера работал ?
Код js
$(document).ready(function() {
// inner variables
var song;
var volume = $('.active .volume');
function initAudio(elem) {
var url = elem.attr('audiourl');
var title = elem.text();
var artist = elem.attr('artist');
$('.active .title').text(title);
$('.active .artist').text(artist);
song = new Audio('/wp-content/themes/nara/music/' + url);
$('.active .playlist li').removeClass('active');
elem.addClass('active');
}
function playAudio() {
song.play();
$('.active .play').addClass('hidden');
$('.active .pause').addClass('visible');
$('.active .playlist').slideDown();
}
function stopAudio() {
song.pause();
$('.active .play').removeClass('hidden');
$('.active .pause').removeClass('visible');
}
// pause click
$('.active .pause').click(function (e) {
e.preventDefault();
stopAudio();
});
// stop click
$('.active .stop').click(function (e) {
e.preventDefault();
stopAudio();
});
$('.active .volume').click(function (e) {
e.preventDefault();
if($(this).hasClass('mute')) {
$(this).removeClass('mute');
song.volume = 1;
} else {
$(this).addClass('mute');
song.volume = 0;
}
});
// playlist elements - click
$('.active .playlist li').click(function () {
stopAudio();
initAudio($(this));
playAudio();
});
$('.controls .play').click(function(){
$('.mItem .playlist').slideUp();
song.pause();
initAudio($(this).parents('.player').next().find('li:first-child'));
playAudio();
song.volume = 1;
});
$('.music .mItem').mouseenter(function(){
$('.music .mItem').removeClass('active');
$(this).addClass('active');
});
initAudio($('.active .player li:first-child'));
});
HTML
<div class="mItev active">
<div class="player_block">
<div class="player">
<div class="controls">
<div class="play"></div>
<div class="pause"></div>
<div class="stop"></div>
</div>
<div class="player_music_name">
<div class="title left">Love and memory</div>
<div class="artist left">NARA</div>
</div>
<div class="volume"></div>
</div>
<ul class="playlist">
<li audiourl="01.mp3" artist="NARA">Love and memory</li>
<li audiourl="02.mp3" artist="NARA">Love and memory 2</li>
<li audiourl="03.mp3" artist="NARA">Love and memory 3</li>
</ul>
</div>
</div>
Тоесть как видно по коду я начал копать в сторону присваивания блоку класс active, но все равно что-то не выходит, кто не понял суть вопроса вот видео
take.ms/eSatE.
Уже сам запутался куда надо копать.
p.s. Если кто-то знает как сделать проще или плагин для плеера, то кидайте в ответы к вопросу. Плеер должен быть с: кнопка плей, кнопка стоп, название трека, и ползунок громкости.
