立即播放 JavaScript 声音文件答案

【问题标题】：Play a JavaScript sound file without a delay立即播放 JavaScript 声音文件
【发布时间】：2013-02-26 00:09:55
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

尝试使用原生 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/

【讨论】：

【解决方案2】：

它具有不错的跨浏览器支持，您可以使用 JavaScript 预加载/启动/停止声音。我已经在动画发生时使用它来播放声音并且没有看到任何延迟。你也可以让它等待你所有的声音资源加载完毕后再做某事，同时显示一个加载屏幕或其他东西。

【讨论】：

【解决方案3】：

您依赖于用户可能必须使用embed 播放音频的任何外部插件，因此性能可能因用户而异。

我的建议是使用像 howler.js 这样的库，它是为游戏而构建的。 HTML5 audio can be quite the pain to get right, especially for games，因此您可以通过使用库而不是自己尝试摆弄 HTML5 audio 元素来避免很多麻烦。

【讨论】：

【解决方案4】：

我在其他一些stackoverflow帖子上做了一些挖掘，我发现在HTML5中，你可以这样做

var sound=new Audio("hello.wav");

然后调用

sound.play();

这似乎可以解决问题，而且没有延迟。

【讨论】：

【解决方案5】：

Web Audio API 是适合这项工作的工具。有很多可用的库可以简化复杂 API 的使用。您还可以查看 musquito 我创建的一个小型库，它管理 Web Audio API 的复杂性并帮助创建和管理单个或一组声音。

【讨论】：