ios - 移动版 Safari : Audio + cache manifest

Question

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

在阅读了这里和其他地方关于 HTML5 音频在移动 Safari 上的这种情况下的几个“缺点”并尝试了一些“黑客”和技巧之后，我陷入了 Safari 看起来很简单的情况(因为缺少更好的词)坏了:

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

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

有趣的是，他们的演示包括一个游戏，它完全符合我的需要并且触发了相同的错误行为。我什至遇到这样一种情况:移动 Safari 中任何选项卡中的任何音频播放器都会播放 Buzz 演示游戏中的特定声音(!)。

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

有没有人设法让这样的东西以某种方式工作？(— 看到 Apple 如何处理某些事情后，我不希望有太多回应，尽管......)

---

更新 1:

此答案中的示例会产生相同的效果:How to synthesize audio using HTML5/Javascript on iPad

---

更新 2:

更新 iOS(以及 Safari)似乎解决了音频错误。不过，缓存 list 似乎不会影响音频文件。这些文件根本不可用。

删除缓存 list 后，应用程序运行正常，但将其添加到“主屏幕”并重新加载它也会阻止音频播放。

Answer 1

我希望我能告诉你有一个神奇的公式可以让你所有的 html5 媒体完美地工作，但没有。目前对 HTML5 音频/视频的移动支持非常差；远远落后于其桌面前辈。更糟糕的是，每个不同的平台都以不同的方式处理它，并且大多数平台仅在半新版本中支持它。

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

---

1) 不能加载多个音频/视频文件

根据我的经验，浏览器一次只会加载一个文件。如果你播放一个文件，去播放另一个，然后回来，它会重新加载那个文件。而且，尽管我自己没有尝试过，但我认为缓存 list 不会对您有所帮助。

我必须做的是将我所有的音频文件合并到一个大的音频文件中。然后，根据请求的音轨，我会将播放位置移动到适当的起始位置并播放该音轨。然后，我将使用 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

祝你好运!