javascript - 立即播放 JavaScript 声音文件

Question

我有一个带有声音的 HTML5 canvas 游戏，但我遇到的问题之一是当播放声音时，所有其他操作都会停止，直到声音播放完毕。我使用了这段代码

document.getElementById("music").innerHTML="<embed src=\""+surl+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"

其中 surl 是正在播放音乐的 span 元素的声音和音乐的 url。 有谁知道如何在不延迟整个程序的情况下播放声音？

我尝试了一个相当大的文件，结果发现虽然它确实在后台播放，但在开始播放声音和继续游戏之间仍然有相当长的延迟。

Answer 1

尝试使用 native HTML5 音频 API。首先，创建您需要的声音实例:

var ping = new Audio("ping.ogg");

注意:您不需要在任何时候将这些音频实例插入到 DOM 中。

当您准备好播放声音时，例如当有人点击时:

document.querySelector(".ping").addEventListener("click", function() {

    // ping clicked, play ping sound:
    ping.play()
})

因为 ping 实例是预加载的，所以播放声音应该没有延迟，您可以播放任意多次。

请记住，跨浏览器的编解码器支持不一致，因此您必须拥有 ogg 源和 MP3 源，或其他组合(支持表可在此处找到 http://en.wikipedia.org/wiki/HTML5_Audio#.3CAudio.3E_element_format_support )。

如果您想要一种更加向后兼容的方法，我推荐 SoundManager2 作为具有简单 API 的完整解决方案:http://www.schillmania.com/projects/soundmanager2/

否则，可以在此处找到 native HTML5 音频 API 的文档: https://developer.mozilla.org/en-US/docs/HTML/Element/audio 在这里 https://developer.mozilla.org/en-US/docs/DOM/HTMLAudioElement