移动 Safari：音频 + 缓存清单

Question

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

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

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

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

有趣的是，他们的演示包含一个游戏，它几乎完全符合我的需要并且触发了相同的错误行为。我什至遇到了这样一种情况，即移动 Safari 中任何标签中的任何音频播放器都会在 Buzz 演示游戏中播放某种声音（！）。

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

有没有人设法让这样的事情以某种方式发挥作用？（——看过苹果如何处理某些事情后，我不希望得到太多回应……）

---

更新 1：

此答案中的示例导致相同的效果：How to synthesize audio using HTML5/Javascript on iPad

---

更新 2：

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

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

Answer 1

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

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

---

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

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

我要做的就是将我所有的音频文件合并成一个大的音频文件。然后，根据请求的音轨，我会将播放位置移动到适当的起始位置并播放该音轨。然后，我会使用 setInterval 每隔几毫秒检查一次播放，以确定当前播放位置是否到达曲目的末尾。完成后，我暂停了它。 Pluis，我在每首曲目之间给自己留了几秒钟 (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

祝你好运！