Добавить активный класс к элементу LI в аудиоплеере

Question

Я работаю над своим аудиоплеером, и я пришел к той части, где хочу добавить активный класс к той песне, которая сейчас играет. Однако я немного смущен, потому что, похоже, я не могу правильно перехватить текущую песню после того, как песня закончилась в моей ul (li).

Это ссылка на мой личный домен, чтобы вы могли получить более четкую идею. Я надеюсь, что это не считается рекламой, у меня ничего нет в домене, но мои тесты и проекты: Link

Итак, каждый раз, когда вы нажимаете на песню, LI get является классом «активных», однако, если песня заканчивается, следующая песня не имеет класс «активный»

JSFiddle HERE

Хорошо, если это помощь, я собираюсь добавить конец функции дорожки здесь:

// Events linstener 
audio.addEventListener("ended", function() { switchTrack(); }); 

// Functions 
function switchTrack(event){ 
    $("ul li").removeClass('active'); 
    if(index == (obj.songsrc.length - 1)){ 
     index = 0; 
    } else { 
     index++;  
    } 
    playlist_status.innerHTML = obj.title[index]; 
    playlist_song.innerHTML = obj.songs[index]; 
    playlist_coverimage.src = "images/"+obj.images[index]+".jpg"; 
    audio.src = dir+obj.songsrc[index]+ext; 
    audio.play(); 
} 

И вот как я создаю LI:

for(var i = 0; i < obj.songsrc.length; i++) { 
    li = document.createElement("li"); 
    li.className = "songs_wrap"; 
    li.innerHTML = "<div class='songs_inner'>" + "<h4>"+obj.title[i]+ "</h4><p>" + obj.songs[i] + "</p></div>"; 
    mylist.appendChild(li); 
    if(audio.play) 
    $("li:nth-child(1)").addClass("active"); 
} 

Answer 1

Возможно, вы захотите добавить слушателя к аудио-объекту.

audio.addEventListener('ended', function(e) { // do some class swapping });

Или что-то вдоль этих линий с Media events.