时间戳

首页 > 解决方案 > HTML 格式的音频播放列表

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

问题描述

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

我正在尝试了解如何在 html 中制作音频播放列表，因此我尝试按照此处的教程进行操作：https ://www.youtube.com/watch?v=vtZCMTtP-0Y （代码如下），以实现我的目标. 唯一的问题是它不起作用，当一首歌曲结束时它总是返回到列表中的第二首歌曲，控制台也告诉我有一个“未捕获（承诺）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;
}

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

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

标签： javascriptjqueryhtmlcss

解决方案

所以基本上问题是我在跨度内使用了“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>

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

推荐阅读