Аудио плейлист в HTML

Я просто решил это, спасибо всем.

Я пытаюсь понять, как создавать аудио-плейлисты в html, поэтому я попытался следовать руководству здесь: https://thewikihow.com/video_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;
}

Я был бы очень признателен, если бы кто-нибудь мог мне помочь.

Я просто решил это, спасибо всем.