Контроль выбора
Привет. Есть рабочий плеер, на базе <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); }); ... Подскажите - как это сделать? |
cupoma58,
document.querySelectorAll('ul li.source')[number].classList.remove('active'); number++; if (number >= musicSrc.length) {number = 0;} document.querySelectorAll('ul li.source')[number].classList.add('active'); |
Благодарю.
|
Часовой пояс GMT +3, время: 04:27. |