Привет. Есть рабочий плеер, на базе <audio>, с плей-листом:
CSS:
ul {
margin: 0 0 0 38%;
background: #363636;
width: 300px;
color: #363636;
padding: 10px;
overflow: hidden;
}
ul li {color: #ccc; cursor: pointer;}
ul li.active {background: #cc7600;}
ul li:hover {background: #696969;}
HTML:
<ul>
<li class="source">ABBA "S.O.S."</li>
<li class="source">ABBA "Waterloo"</li>
<li class="source">Travis "Sing"</li>
<li class="source">МакSиm "Знаешь-ли, ты?"</li>
<li class="source">Лолита "Похороните, меня, за плинтусом"</li>
<li class="source">Eagles "Калифорния"</li>
<li class="source">Лолита "На Титанике"</li>
<li class="source">Ефрем Амирамов "Молодая"</li>
<li class="source">Парк Горького "Moscow calling"</li>
</ul>
Переход, с трека на трек, идёт через кнопки или - автоматом, если - подряд.
Хотелось-бы выделить строку, с играющим треком. Это - переход на следующий трек:
JS:
...
frw.addEventListener('click', () => {
ap.pause();
ap.currentTime = 0;
number++;
if (number >= musicSrc.length) {number = 0;}
ap.src = musicSrc[number]; // массив, из 9-ти треков
ap.play();
pl.innerHTML = '<svg><path d="" /></svg>'; // pause
ct.innerHTML = setTime(ap.currentTime);
});
...
Подскажите - как это сделать?
