如何以及在哪里为自定义音频播放器定义JavaScript函数？

Question

我想在一个网页中加入一个自定义的音频播放器，如下所示 本指南.

该HTML是

<audio id="music">
    <source src="song.mp3" type="audio/mpeg" />
</audio>
<div id="audioplayer">
    <button id="pButton" class="play" onclick="play()"></button>
</div>

Javascript是

window.onload=function() {
    var music = document.getElementById('music');
    var pButton = document.getElementById('pButton');
}

function play() {
    if (music.paused) {
        music.play();
        pButton.className = "";
        pButton.className = "pause";
        //alert("This happens");
    } else {
        music.pause();
        pButton.className = "";
        pButton.className = "play";
    }
}

变量'music'和'pButton'被包裹在一个名为 "music "的变量中。window.onload 函数，因为必须加载DOM才能定义它们的元素（否则会出错）。

这段代码在页面的正确位置显示了一个 "播放 "按钮，但它没有工作。 如果我按下按钮，页面只是重新加载。 没有音乐被播放。 我不明白，但我相信这是类似这样的代码 这个问题 因为如果我在上面的代码中加入注释的提醒，只要提醒模式处于活动状态，代码就会工作，音乐就会播放。

在链接的问题中，解决方法是将函数 play() 照例 window.onload 函数，也是如此。 然而，当我这样做时，按下 "Play "按钮时，控制台中出现了 "ReferenceError: play is not defined "的错误。 这至少是有道理的：通过将 play() 在 window.onload 函数，当DOM加载完成后，它就存在了，但之后的页面事件就无法使用了。

所以，综上所述。

1) 如果我将 play() 外界 window.onload 包皮

2) 如果我将 play() 里面 window.onload 包皮

在JavaScript的标准非量子近似中，只有这两个地方是 play() 可以。 那么如何实现自定义音频播放器呢？

Answer 1

music 和 pButton 是当地的 onload 函数，这样你就不能在它之外访问它们。

我建议定义 play 内的功能 onload 处理程序，并将其动态添加为 onclick 处理器。

你也可以用 onload 与 DOMContentLoaded，它发射的时间较早，但做了它应该做的事情。

document.addEventListener('DOMContentLoaded', function() {
    var music = document.getElementById('music');
    var pButton = document.getElementById('pButton');
    pButton.addEventListener('click', function play() {
        if (music.paused) {
            music.play();
            pButton.className = "pause";
            //alert("This happens");
         } else {
             music.pause();
             pButton.className = "play";
        }
    }
})

<audio id="music">
    <source src="song.mp3" type="audio/mpeg" />
</audio>
<div id="audioplayer">
    <button id="pButton" class="play"></button>
</div>