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

Question

我想在本指南之后的 web 页面中包含一个自定义音频播放器。

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' 包含在window.onload function 中，因为必须加载 DOM 才能定义它们的元素（否则会出错）。

此代码在页面的正确位置显示“播放”按钮，但它不起作用。 如果我按下按钮，页面就会重新加载。 不播放音乐。 我不明白，但我相信这是这个问题的内容，因为如果我在上面的代码中包含注释的警报，只要警报模式处于活动状态，代码就会起作用并且音乐会播放。

在链接的问题中，解决方案是将 function play()包装在标准window.onload function 中。 但是，当我这样做时，按下“播放”按钮失败，控制台中出现“ReferenceError：未定义播放”错误。 这至少是有道理的：通过将play()放在window.onload function 中，它在 DOM 完成加载时存在，但在此之后对于进一步的页面事件不可用。

所以，总结一下，

1) 如果我将play()放在window.onload包装器之外，则代码不起作用

2) 如果我将play()放入window.onload包装器中，则代码不起作用

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

Answer 1

music和pButton对于onload function 是本地的，因此您无法在其外部访问它们。

我建议在onload处理程序中定义play function，并将其动态添加为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>