7

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

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

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

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

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

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

有没有人设法让这样的事情以某种方式工作?(——虽然看过 Apple 如何处理某些事情,但我不希望得到太多回应……)


更新1:

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


更新 2:

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

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

4

1 回答 1

9

我希望我能告诉你有一个神奇的公式可以让你的所有 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

祝你好运!

于 2011-11-01T20:41:43.117 回答