将活动类添加到音频播放器中的 LI 元素

Question

我正在开发我的音频播放器，我已经到了我想为当前正在播放的任何歌曲添加一个活动类的部分。但是我有点困惑，因为在歌曲以我的 ul（li's）结尾后，我似乎无法正确挂钩当前正在播放的歌曲。

这是指向我的私人域的链接，因此您可以更清楚地了解。我希望它不被视为广告，我在域上没有任何东西，但我的测试和项目：Link

所以每次点击一首歌曲，LI 都会得到一个“活跃”类，但是如果歌曲结束，后面的歌曲就没有“活跃”类

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 的东西。