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();
})

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

JavaScript not preventing the default function for audio player

html

javascript

jquery

audio-player