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

Question

所以我一直在关注这个视频，对于我的生活，我无法弄清楚为什么我的代码会使用我的音频文件执行默认的新页面，而不是阻止默认设置。一旦我弄清楚了那部分，当我的歌曲结束时，我应该能够在我的代码底部测试事件监听器。JavaScriptaudioPlayer();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();

})