JavaScript不会阻止音频播放器的默认功能

Question

因此，我一直遵循此video，对于我一生来说，我无法弄清楚为什么我的代码使用音频文件在默认的新页面上执行而不阻止默认设置。一旦弄清楚那部分，当歌曲结束时，我应该能够在代码底部测试事件监听器。

JavaScript

audioPlayer();
function audioPlayer() {
    var currentSong = 0;
    $("#audioPlayer")[0].src = $("#playlist li a")[0];
    $("#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(){
        alert("hi");    
    });
}

HTML

<section>
        <script>
            audioPlayer();
        </script>
        <audio src="" id="audioPlayer" controls>
            Sorry, your browser does not support HTML5 audio player!
        </audio>
        <ul id="playlist">
            <li class="current-song"><a href="All_American_Reject_Move_Along.mp3">Move Along</a></li>
            <li><a href="Far_From_Home.m4a">Far From Home</a></li>
        </ul>
    </section>

Answer 1

确保在加载页面后执行$（“＃playlist li a”）。click（）。

    function initAudioPlayer() {
        var currentSong = 0;
        $("#audioPlayer")[0].src = $("#playlist li a")[0];
        $("#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(){
            alert("hi");    
        });
    }

$(document).ready(function() {
   initAudioPlayer();
})