毫不延迟地播放JavaScript声音文件

Question

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

document.getElementById（“music”）.innerHTML=“<embed src=\”“+surl+”“\”hidden=\“true\”autostart=\“true\”loop=\“false”/>”

其中surl是播放音乐的span元素的声音和音乐的url。有人知道如何在不延迟整个节目的情况下播放声音吗？

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

Answer 1

尝试使用本机HTML5音频API。首先，创建所需声音的实例：

var ping=新音频（“ping.ogg”）；

注：您无需在任何时候将这些音频实例插入DOM。

当您准备播放声音时，例如当有人单击时：

document.querySelector（“.ping”）.addEventListener（“click”，function（）{//单击ping，播放ping声音：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 Audio API的文档可以在以下位置找到：https://developer.mozilla.org/en-US/docs/HTML/Element/audio还有这里https://developer.mozilla.org/en-US/docs/DOM/HTMLAudioElement网站

Answer 2

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

我的建议是使用类似于嚎叫.js，这是建立在游戏的思想。HTML5音频可能很难正确使用，尤其是对于游戏而言，所以您可以通过使用库而不是试图摆弄HTML5来避免很多麻烦音频元素。

Answer 3

我使用这个框架取得了很好的成功：http://www.schillmania.com/projects/soundmanager2/

它具有良好的跨浏览器支持，您可以使用JavaScript预加载/启动/停止声音。我用它来播放动画时的声音，没有看到任何延迟。您还可以让它等待所有声音资产加载后再执行操作，同时显示加载屏幕或其他内容。

Answer 4

Web Audio API是适合此工作的工具。有大量可用的库，可以简化使用稍微复杂的API。你也可以结帐蚊子我创建的一个小型库，用于管理Web Audio API中的复杂性，并帮助创建和管理单个或组声音。

Answer 5

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

var sound=新音频（“hello.wav”）；

然后打电话

sound.play（）；

这似乎奏效了，刻不容缓。