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

我想在下面的网页中包括一个自定义音频播放器

HTML是

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

变量“music”和“pButton”被包装在一个

窗口中。onload

函数中，因为必须加载DOM才能定义它们的元素（否则会出错）

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

在链接问题中，解决方案是将函数

play（）

包装在标准

窗口中。onload

函数也是如此。但是，当我这样做时，按下“播放”按钮失败，控制台中出现“ReferenceError:Play is not defined”错误。这至少是有意义的：通过将

play（）

放在

窗口.onload

函数中，它在DOM加载完成时存在，但在加载完成之后，它就不能用于其他页面事件

所以总而言之,

1） 如果我将

play（）

放在

窗口之外，则代码不起作用。onload

包装器

2） 如果我将

play（）

放在

窗口内，则代码不起作用。onload

包装器

---

在JavaScript的标准非量子近似中，这是

play（）。那么，如何实现自定义音频播放器？
音乐
和
按钮
是
onload
功能的本地按钮，因此您无法在其外部访问它们

我建议在
onload
处理程序中定义
play
函数，并将其动态添加为
onclick
处理程序

您还可以将
onload
替换为
DOMContentLoaded
，它会在前面触发，但会执行它应该执行的操作：

document.addEventListener（'DOMContentLoaded'，function（）{
var music=document.getElementById（'music'）；
var pButton=document.getElementById（'pButton'）；
pButton.addEventListener（'click'，函数play（）{
如果（音乐暂停）{
音乐。播放（）；
pButton.className=“暂停”；
//警惕（“这种情况发生”）；
}否则{
音乐。暂停（）；
pButton.className=“播放”；
}
}
})


似乎对我有用，只要在
play（）中定义这些变量就行了
函数，而不是在
onload中对我来说是一样的，代码工作得很好。@j08691并运行_脚本，至少知道这一点很好。肯定还有其他问题。我在Firefox和Chromium中都有相同的行为，没有浏览器扩展。我将查找其他错误，thanks@charlietfl这不构成di区别这似乎是正确的想法，但不幸的是，这没有什么区别。我尝试了这个想法，使用了
窗口。onload
函数和
DOMContentLoaded
事件侦听器，完全如图所示，但行为是一样的-当我按下“播放”按钮时没有播放任何内容按钮，但如果我包含警报，它就会播放。@Darien标记如果您包含
警报，它就会播放？是的。只要警报模式处于活动状态，并且在我关闭模式时停止，它就会播放。我提到的模式也有类似的问题，那里的答案表明它与异步有关，但我不能声称完全理解问题是什么。
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";
    }
}