移动版Safari:音频+缓存清单

7
我正在开发一个小型Web应用程序,点击几个按钮后可以播放非常短的音频片段。它专门针对iOS(iPad)上的移动Safari。
在这里和其他地方阅读有关HTML5音频在移动Safari上的几个“缺陷”以及尝试一些“技巧”和“黑科技”之后,我陷入了一个困境,即Safari似乎被简单地(缺乏更好的词语)破坏了:
我可以在单击按钮A时播放声音A(需要很长时间才能开始-我假设它正在下载[再次]?)。之后,单击按钮B将立即再次播放声音A。按钮C也是如此。在某些情况下,它会播放不同的声音,有时甚至是正确的声音。使用的格式是.aiff,现在是.m4a。
在自己编写了几个微小版本之后,我决定使用Buzz库来处理声音加载/播放等操作。
有趣的是,他们的演示包括一个游戏,几乎完全符合我需要的并且触发了相同的故障行为。我甚至遇到了这样一种情况:移动Safari中的任何音频播放器在任何选项卡中都会播放Buzz演示游戏中的某种声音(!)。
我希望缓存清单可以帮助克服苹果的预加载限制,并强制应用程序在离线模式下点击按钮后立即播放声音。但在确认整个应用已被缓存后,我无法在离线模式下播放/听到任何声音。 有人设法让类似的东西工作了吗?(—看过苹果处理某些事情的方式后,我并不指望会得到多少回应...)

更新1:

本答案中的示例会导致相同的效果:如何在iPad上使用HTML5/Javascript合成音频


更新2:

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

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

1个回答

9
我希望我能告诉你有一个神奇的公式可以让你的html5媒体完美地工作,但是没有。目前HTML5音频/视频在移动设备上的支持非常差,远远落后于桌面版本。更糟糕的是,不同平台处理方式不同,大多数只在半新版本中支持它。
然而,有一些技巧可以让媒体文件在移动Safari中正确地工作。为了解释它们,您需要了解一些缺点。
1)无法加载多个音频/视频文件
根据我的经验,浏览器一次只会加载一个文件。如果您播放一个文件,然后播放另一个文件,然后回来,它会重新加载该文件。虽然我自己没有尝试过,但我不认为缓存清单会对此有所帮助。
我必须将所有音频文件合并成一个大的音频文件。然后,根据请求的音轨,我会将播放位置移动到适当的起始位置并播放该音轨。然后,我会使用setInterval每隔几毫秒检查一次播放情况,以确定当前播放位置是否到达曲目结尾。一旦它做到了,我就暂停了它。此外,我在每个曲目之间给自己留了几秒钟(2-3),以防手机的CPU负载过高并且稍微晚了一点检查反馈。
2)无法自动播放音频/视频文件
Apple在其HTML5媒体标记技术中内置了这些曲目仅在响应用户点击事件时加载和播放的限制。这样,开发人员就不能在您访问他们的网站时自动播放恼人的曲目。
当我使用音频/视频标记时,我试图构建一个丰富的媒体广告。因此,我将我的音频/曲目加载钩子连接到横幅点击事件,当您单击横幅并展开广告时。
我建议您做的是弹出一个小型灯箱,询问用户是否要打开/关闭声音。您可以将负载功能附加到该弹出框的单击事件上,而不管用户是否打开或关闭声音。
个人而言,我在使用load()函数时没有太多运气。我会运行该函数以加载音频,然后单击播放,它只会再次加载。可能一直都是我做错了,所以请随意证明我是错误的,并使其正常工作。我所做的是告诉曲目播放,这样它就会开始加载,然后我会使用setInterval来查看当前播放时间是否增加了几毫秒。一旦我注意到它开始播放曲目,我就立即将其暂停。
3)仅在iOS 4.0及更高版本中支持音频/视频标记
无法绕过这个问题,这只是事实。
以下是我在使用音频/视频标记开发时有所帮助的一些网站: http://www.w3.org/wiki/HTML/Elements/videohttp://dev.w3.org/html5/spec-author-view/video.html#media-elements 是关于 HTML 视频元素的文档。

非常感谢!这里有很多很好的建议。我一定会尝试一些东西。 - polarblau
你需要知道的另一件事是,在iOS上无法缓存音频或视频,即使使用appcache也不行。 - idbehold
你能否给出一个代码示例 - 将播放位置移动到适当的起始位置。另外,如果您想播放音轨3秒钟,如何停止它? - Jon

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接