移动 Safari:音频 + 缓存清单
Posted
技术标签:
【中文标题】移动 Safari:音频 + 缓存清单【英文标题】:Mobile Safari: Audio + cache manifest 【发布时间】:2011-10-22 20:31:09 【问题描述】:我有一个小型网络应用程序,只需单击几个按钮即可播放非常短的声音片段。它明确针对 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)似乎可以解决音频错误。不过,缓存清单似乎不会影响音频文件。这些文件根本不可用。
删除缓存清单后,应用可以正常工作,但将其添加到“主屏幕”并重新加载它也会阻止音频播放。
【问题讨论】:
【参考方案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/videohttp://dev.w3.org/html5/spec-author-view/video.html#media-elements
祝你好运!
【讨论】:
非常感谢!这里似乎有很多很棒的建议。肯定会尝试一些事情。 您应该知道的另一件事是,在 iOS 上缓存音频或视频是不可能的。即使使用 appcache。 你能举个代码例子吗 - 将播放位置移动到适当的起始位置。另外,如果您想播放曲目 3 秒,那么您如何停止呢?以上是关于移动 Safari:音频 + 缓存清单的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Javascript 在移动 Safari 和所有其他浏览器上录制音频?
移动 safari 似乎在导航后卸载 html5 音频/视频