Question

我正在开发一个音乐Web应用程序，它会随机播放音符序列，但是我遇到了这个问题：每当我要在页面加载后第一次按下播放时，序列都会在步入正轨之前先“ ch”。我认为这可能是因为当我第一次按play时，资源尚未加载。我想我是对的，做了一些研究，发现这个preload = auto的东西，似乎可以解决这个问题。至少，如果您是第一次刷新或访问该页面并立即按播放，它就可以正常工作。但是，如果您一段时间不执行任何操作（例如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>

所以我的问题是如何解决这个问题？无论如何，要告诉该功能保留直到它可以实际播放第一个文件？也许是在缓冲资源并准备就绪时触发的DOM事件？我觉得直到我有办法检查之前，我都不能勉强让计时器开始计时，否则它将像往常一样疯狂。任何想法将不胜感激！

Answer 1

页面完全加载后将调用load事件：

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

DOMContentLoaded事件在加载DOM之后但在CSS和img之前被调用。

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

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

1 个答案: