javascript - HTML 格式的音频播放列表

Question

我刚刚解决了，谢谢大家。

我试图了解如何在 html 中制作音频播放列表，因此我尝试按照此处的教程进行操作:https://www.youtube.com/watch?v=vtZCMTtP-0Y (代码如下)，以实现我的目标。唯一的问题是它不起作用，当一首歌结束时它总是返回到列表中的第二首歌曲，而且控制台告诉我有一个“未捕获( promise )DOMException”，我不知道如何解决。

function audioPlayer() {
    var currentSong = 0;
    $("#audioPlayer")[0].src = $("playlist li a")[0];
    $("#audioPlayer")[0].play();
    $("#playlist li a").click(function(e) {
        e.preventDefault();
        $("#audioPlayer")[0].src = this;
        $("#audioPlayer")[0].play();
        $("#playlist li").removeClass("current-song");
        currentSong = $(this).parent().index();
        $(this).parent().addClass("current-song");
    });

    $("#audioPlayer")[0].addEventListener("ended", function() {
        currentSong++;
        if (currentSong == $("#playlist li a").length) {
            currentSong = 0;
        }
        $("#playlist li").removeClass("current-song");
        $("#playlist li:eq(" + currentSong + ")").addClass("current-song");
        $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
        $("#audioPlayer")[0].play();
    });
}

此外，我尝试使用 css 将正在播放的歌曲的名称设为蓝色，但发生的情况是我单击的所有歌曲的名称都变成了蓝色，而不仅仅是正在播放的歌曲。

#audioPlayer {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#playlist li a {
  color: white;
  text-decoration: none;
}

#playlist .current-song a {
  color: #0b80f7;
}

如果有人能帮助我，我将不胜感激。

刚刚解决了，谢谢大家

Answer 1

所以基本上错误的是我在这样的跨度内使用“a”元素:

<li class="current-song"> <span><a href="../music/lights.mp3"> Lights Down Low</a></span><span>3:43</span></li>

当我应该做的是:

<li class="current-song"> <a href="../music/lights.mp3"> Lights Down Low</a><span>3:43</span></li>

所以根据我的脚本它可以工作...有时我真的很愚蠢。感谢所有发表评论的人!