Mobile Safari：音频 + 缓存清单

我有一个小型网络应用程序，只需单击几个按钮即可播放非常短的声音。它明确针对 iOS (iPad) 上的移动 Safari。

在阅读了此处和其他地方有关移动 Safari 上的 HTML5 音频在这种情况下的几个“缺点”并尝试了一些“黑客”和技巧之后，我陷入了 Safari 看起来很简单的情况（因为缺乏更好的词）破碎的：

我可以在单击按钮 A 时播放声音 A（它需要很长时间才能启动 - 我假设它[再次]下载？）。之后，单击按钮 B 将立即再次播放声音 A。按钮 C 也是如此。在某些情况下，它会播放不同的声音，有时甚至是正确的声音。但主要是声音 A。使用的格式是 .aiff ，现在是 .m4a 。

在自己写了几个小版本之后，我决定使用Buzz处理声音加载/播放等的库。

有趣的是，他们的演示包括一个游戏，它几乎完全满足了我的需要and触发相同的错误行为。我什至遇到了这样的情况：移动 Safari 中任何选项卡中的任何音频播放器都会播放 Buzz 演示游戏中的特定声音（！）。

我希望缓存清单可以帮助克服苹果的预加载限制，并强制应用程序在离线模式下按下按钮后立即播放声音。但在确认整个应用程序已被缓存后，我无法在离线模式下播放/听到任何声音。

有没有人设法让这样的东西以某种方式工作？（——在了解了苹果如何处理某些事情后，我不期望有太多回应……）

更新1：

此答案中的示例会产生相同的效果：如何在 iPad 上使用 HTML5/Javascript 合成音频

更新2：

更新 iOS（以及 Safari）似乎可以解决音频错误。不过，缓存清单似乎不会影响音频文件。这些文件根本不可用。

删除缓存清单后，应用程序可以正常工作，但将其添加到“主屏幕”并重新加载也会阻止音频播放。

我希望我能告诉您有一个神奇的公式可以让所有 html5 媒体完美运行，但事实并非如此。目前对 HTML5 音频/视频的移动支持相当差；比它的桌面前身落后得多。更糟糕的是，每个不同的平台对其处理方式都不同，并且大多数平台仅在半新版本中支持它。

不过，您可以采用一些技巧来使媒体文件在移动 Safari 中正常工作。为了解释它们，您需要了解它的一些缺点。

1) 无法加载多个音频/视频文件

根据我的经验，浏览器一次只会加载一个文件。如果您播放一个文件，请去播放另一个文件，然后回来，它会重新加载该文件。而且，虽然我自己没有尝试过，但我不相信缓存清单会对您有所帮助。

我所要做的就是将所有音频文件合并为一个大音频文件。然后，根据请求的音轨，我将播放位置移动到适当的起始位置并播放该曲目。然后，我将使用 setInterval 每隔几毫秒检查一次播放，以确定当前播放位置是否到达曲目末尾。一旦完成，我就暂停了。另外，我在每个曲目之间给自己留了几秒（2-3）秒的时间，以防手机的 CPU 负载过重，检查提要有点太晚了。

2) 无法自动播放音频/视频文件

Apple 在其 HTML5 媒体标签技术中内置了这样的限制：这些曲目只能响应用户点击事件而加载和播放。这样，当您访问他们的网站时，开发人员就无法自动播放烦人的曲目。

当我使用音频/视频标签时，我试图构建一个富媒体广告。因此，当您单击横幅并展开广告时，我将音频/曲目加载挂钩到横幅单击事件。

我建议你应该做的是弹出一个小灯箱，询问用户是否要打开/关闭声音。您可以将加载函数附加到该弹出框的单击事件，无论用户是否打开或关闭声音。

就我个人而言，我在使用 load() 函数时运气不佳。我会运行该函数来加载音频，然后单击播放，它会再次加载它。可能一直以来我都没有做对，所以请随时证明我错了并让它发挥作用。我所做的是告诉曲目播放，这样它就会开始加载，然后我使用 setInterval 来查看当前播放时间是否只增加了几毫秒。一旦我注意到它开始播放曲目，我就会立即暂停。

3）音频/视频标签仅在iOS 4.0及更高版本中支持

没有什么技巧可以解决这个问题。这只是事实。

以下是一些在我使用音频/视频标签进行开发时提供帮助的网站：

http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements

祝你好运！