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

时间:2014-12-15 23:28:29

标签: javascript jquery audio-player

我正在使用我的音频播放器,我已经来到了我想要为当前播放的任何一首歌添加活动课程的部分。然而,我有点困惑,因为在歌曲结束后,我似乎无法正确地播放当前播放的歌曲(李先生)。

这是我的私人域名的链接,因此您可以获得更清晰的想法。我希望它不被视为广告,我在域名上没有任何内容,但我的测试和项目: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");
}

1 个答案:

答案 0 :(得分:0)

您可能希望为音频对象添加侦听器。

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

Media events沿线的某些内容。