Javascript 如何确保在运行函数之前加载所有资源？

我正在开发一个音乐网络应用程序，它可以播放一系列随机的音符，但我遇到了这个问题：每当我在加载页面后第一次按play时，这些音符就会在进入正轨之前“窒息”。我想这可能是因为当我第一次按play时资源还没有加载。我想我是对的，做了一些研究，发现这个预加载=自动的东西，似乎解决了这个问题。至少，如果您第一次刷新或访问该页面，并立即按play，它就可以正常工作。然而，如果你有一段时间不做任何事情，比如2/3分钟，同样的事情也会发生。有一个延迟启动，好像它正在加载文件，然后它笨拙地加速，就像它试图赶上setInterval计时器一样。我编写了这个非常简化的代码版本只是为了说明：

<button>Play</button>
<audio src="source1.mp3"></audio>
<audio src="source2.mp3"></audio>
<audio src="source3.mp3"></audio>
<script>
    let notes = []
    document.querySelectorAll("audio").forEach(function(note){
        notes.push(note)
    })
    
    function play(){
        let random_index = Math.floor(Math.random() * 3),
        note = notes[random_index]
        note.play()
        setInterval(function(){
            note.pause()
            note.currentTime = 0
            play()
        }, 500)
    }
    
    let button = document.querySelector("button")
    button.addEventListener("click", function(){
        play() 
    })

</script>

播放
let notes=[]
document.queryselectoral（“音频”）.forEach（函数）（注释）{
notes.push（note）
})
函数播放（）{
让random_index=Math.floor（Math.random（）*3），
注=注[随机索引]
注：play（）
setInterval（函数（）{
注：暂停（）
注意：currentTime=0
play（）
}, 500)
}
let button=document.querySelector（“按钮”）
addEventListener（“单击”，函数（）{
play（）
})

---

所以我的问题是如何解决这个问题？是否有任何方法可以告诉函数保持，直到它可以实际播放第一个文件？可能是在资源缓冲并准备就绪时触发的DOM事件？我觉得在我有办法检查之前我不能让计时器启动，否则它会像往常一样疯狂。任何想法都将不胜感激

页面完全加载后调用

load

事件：

window.addEventListener("load", function(){
  // Your code
});

加载DOM后，在css和img之前调用

DOMContentLoaded

事件

document.addEventListener("DOMContentLoaded", function(){
  // Your code
});

---

除了超负荷。。你知道有专门为此目的的活动吗？我已经尝试了canplay和canplaythrough，它们都不能解决问题。如果我让页面闲置几分钟，然后按play，序列就会断断续续。我真的不知道我能做什么。设置间隔设置

note.currentTime=0

每500毫秒将导致所有文件都有5秒长，但是注释之间的时间由用户选择，因此我必须重置文件，以确保每次都从一开始播放。我想不出更好的办法了。此外，我只测试了一个音符，没有设置间隔或任何东西，但我仍然需要等待几乎一秒钟的音频开始播放。“canplaythrough”或“playing”等事件将启动，但播放尚未开始。问题总是第一次打电话。我发现这篇文章描述了一个类似的问题，但不幸的是没有答案：谢谢，但我真正需要的是确保所有音频文件都已加载并准备好使用。我有一个用于音频签出的小库。太好了，我会签出的！