Привет. Есть рабочий плеер, с плей-листом:
<ul class="playlist">
<li>имя трека-1</li>
...
</ul>
...
trak = 0;
const pl = [
'file-1.mp3',
...
]
// включить подсветку трека, в плей-листе
function onLith() {
document.querySelectorAll('ul li')[trak].classList.add('active');
}
// отключить подсветку трека, в плей-листе
function offLith() {
document.querySelectorAll('ul li')[trak].classList.remove('active');
}
// подготовка файла:
function choosTrak(trak) {
audio.src = 'disk:/path/to trak/' + playlist[trak];
audioPlay();
}
// пуск файла:
function audioPlay() {
if (audio.paused || audio.ended) {
onLith(); // включаем подсветку строки
audio.play();
}
else {
audio.pause();
}
}
play.addEventListener('click', audioPlay);
// по окончании:
function endPlay() {
...
offLith(); // выключаем подсветку строки
nextTrak(); // продолжаем (закольцовываем) воспроизведение
}
audio.addEventListener('ended', endPlay);
// выбор трека, через элемент плей-листа:
document.querySelectorAll('.playlist li').forEach ((el, i) => {
el.addEventListener('click', () => {
choosTrak(i);
});
});
При выборе трека, через плей-лист, подсвечивается только трек, с индексом "0".
По окончании - идёт переход на трек,с индексом "1", а не на следующий, после выбранного.
Есть-ли возможность- определить индекс выбранного, через плей-лист, трека, что-бы привязать, к нему, подсветку?
