javascript - 立即播放 JavaScript 声音文件

Question

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

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

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

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

score 8 · Accepted Answer

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

否则，可以在此处找到本机 HTML5 音频 API 的文档： https ://developer.mozilla.org/en-US/docs/HTML/Element/audio 和此处https://developer.mozilla.org/en-美国/docs/DOM/HTMLAudioElement

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

我的建议是使用像howler.js这样的库，它是为游戏而构建的。正确处理 HTML5 音频可能会非常痛苦，尤其是对于游戏而言，因此您可以通过使用库而不是尝试自己摆弄 HTML5audio元素来避免很多麻烦。

score 0 · Accepted Answer

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

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

然后打电话

sound.play();

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

score 0 · Accepted Answer

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

5 回答 5