Контроль выбора
 

Привет. Есть рабочий плеер, на базе <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');

Благодарю.