html - Scirra 如何在 Construct 2 中获得如此完美的 HTML5 音频？

Question

看看这个太空射击游戏演示。

HTML5 音频在 Chrome 18 和 Firefox 10 上非常完美。播放声音没有延迟，每个样本都能完美播放。上次我尝试使用 HTML5 音频和 JavaScript 播放声音时，我无法多次播放声音。

Scirra 做了什么魔法让这一切变得如此完美？

Answer 1

我是Construct 2的开发者，所以我希望我有足够的资格回答你的问题:)

HTML5 音频确实是一团糟，所以我已经竭尽全力尝试在 Construct 2 中使其防弹。以下是我所做工作的概述：

使用网络音频 API

HTML5 音频似乎是为流媒体音乐而设计的，因此 HTML5 音频对象是一种重量级对象。像 Space Blaster 一样每秒播放 10 个声音很容易占用浏览器。另一方面，Web Audio API 是一个具有路由、效果和轻量级声音播放的高性能音频引擎。它非常适合游戏。音频缓冲区和音频播放是分开的，因此您可以拥有一个数据缓冲区并有效地同时播放多次，而某些浏览器如果您播放 HTML5 声音几次就会出现故障，每次都重新下载！由于它实际上是为游戏等设计的，因此您可以愉快地播放数吨的声音，而且它仍然会很好地哼唱。它还可以使用 HTML5 音频作为音源，

Chrome 支持 Web 音频 API，iOS 6+ 也支持它（尽管在你尝试在触摸事件中播放一些音频之前它是静音的），F​​irefox 正在努力支持，它应该很快就会在 Chrome 中推出安卓。因此，在这些平台上，音频将更加可靠。

有关HTML5Rocks和提议规范的更多信息- 你现在必须使用规范作为文档，那里没有太多其他内容。

其他浏览器：实现音频回收系统

Web Audio API 尚未在所有地方都得到支持，尤其是 IE，这意味着您仍然需要将 HTML5 音频插入到可能适用于游戏的东西中以实现向后兼容性。这样做的方法是回收音频对象。

Space Blaster 中玩家的激光每秒发射 10 次——这还不包括任何其他音效！正如我之前提到的，音频是一种重量级的对象，所以如果你每秒执行new Audio()10 次以上，你瞧，浏览器最终会死掉，音频开始出现故障。但是，您可以通过回收它们来大大减少创建的音频对象的数量。

基本上，对于每个声音效果，保留一个以该声音为源创建的每个 Audio 对象的缓存。然后，在播放新声音时，在缓存中搜索所有已播放完毕的音效（该ended属性为 true）。如果找到，请将其倒回到开头 ( currentTime = 0) 并play()再次倒回。new Audio()否则，在缓存中创建一个对象。

由于播放器的激光音效很短，而不是每分钟创建 600 个音频对象，它只会循环循环 3 或 4 个。不幸的是，一些浏览器仍然会下载 4 次（Safari 上次我检查过！）或者在第一次播放每个声音缓冲区时有很高的延迟，但最终浏览器会赶上，因为总是重复使用相同的缓冲区。所以基本上声音可能会有点奇怪一会儿，然后就消失了。我们还使用 HTML5 应用程序缓存，因此下次您播放从磁盘加载的所有内容时，后续播放应立即执行。

基本上就是这样。在第一次播放 HTML5 音频时它仍然有点狡猾，但之后每次都应该相当可靠，只要浏览器有一个健全的音频实现。有很多方法可以尝试克隆音频对象，但我发现倒带现有音频效果最好。

因为我们强调纯 HTML5，所以根本没有 SoundManager 或任何基于 Flash/插件的后备。

我们还支持 PhoneGap 和 appMobi 为移动设备提供的音频 API，因为移动设备上的 HTML5 音频甚至不值得尝试。这使得我们的音频引擎总共封装了四个音频 API，是的，它看起来确实像一个科学怪人的烂摊子，但它确实有效。

就是这样。我想我们的竞争对手会读到这个，但是谁在乎什么时候有 SO 代表呢？？？！！！1111