移动Safari:audio+caching清单

我有一个小型的networking应用程序,点击几个button,播放真正短的声音位。 它明确针对iOS上的移动Safari(iPad)。

在这里和其他地方阅读了关于HTML5audio在移动Safari上的几个“缺点”,并尝试了一些“黑客”和技巧之后,我坚持认为Safari很简单(因为没有更好的词)破碎:

我可以播放声音A(需要很长时间才能开始 – 我假设它是downlading [再次]?)点击buttonA.之后,点击buttonB将立即播放声音A了。 buttonC也一样。在某些情况下,它会发出不同的声音,有时甚至是正确的。 但主要是声音A.使用的格式是.aiff,现在是.m4a。

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

有趣的是,他们的演示包括一个游戏,它几乎正是我所需要的, 触发相同的错误行为。 我甚至结束了在任何标签的任何移动Safari中的任何audio播放器将播放Buzz演示游戏(!)中的特定声音的情况。

我希望caching清单可能有助于克服Apples预加载限制,强制应用程序在离线模式下点击button后播放声音。 但确认整个应用程序已被caching后,我无法在离线模式下播放/听到任何声音。

有没有人设法得到这样的东西以某种方式工作? (看过苹果如何处理某些事情,虽然我不期待太多回应)


更新1:

在这个答案的例子导致相同的效果: 如何在iPad上使用HTML5 / Javascript合成audio


更新2:

更新iOS(和Safari)似乎解决了audio错误。 但是,caching清单似乎并不影响audio文件。 这些文件根本不可用。

删除caching清单后,应用程序可以正常工作,但将其添加到“主屏幕”并重新加载,可防止播放audio。

我希望我能告诉你有一个神奇的公式,让所有的HTML5媒体完美的工作,但没有。 目前对HTML5audio/video的移动支持相当糟糕; 比桌面前辈还要落后得多。 更糟的是,每个不同的平台都有不同的处理方式,大多数平台只支持半新版本。

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


1)您无法加载多个audio/video文件

我的经验是,浏览器一次只能加载一个文件。 如果您播放一个文件,请继续播放另一个文件,然后再回来,然后重新加载该文件。 而且,虽然我没有自己尝试,但我不相信caching清单可以帮助您。

我所要做的就是把我所有的audio文件合并成一个大的audio文件。 然后,根据要求的音轨,我将把播放位置移动到合适的起始位置并播放该曲目。 然后,我会使用setInterval每隔几毫秒检查一次播放,以确定当前播放位置是否到达轨道的末端。 一旦这样做,我暂停了。 Pluis,我给了自己几秒钟(2-3)之间的每一个轨道,以防万一电话的CPU负荷很大,并检查饲料有点太晚。

2)您不能自动播放audio/video文件

苹果在其HTML5媒体标签技术中内置了这些轨道只能加载和播放以响应用户点击事件的限制。 这样一来,开发人员在访问他们的网站时就不能自动播放烦人的曲目。

当我使用audio/video标签时,我试图构build一个富媒体广告。 所以当我点击横幅并展开广告时,我把audio/音轨加载到横幅点击事件上。

我build议你应该做的是有一个小的灯箱popup来,询问用户是否要打开/closures声音。 无论用户打开还是closures声音,都可以将加载函数附加到该popup框的单击事件。

就个人而言,我没有太多的运气使用load()函数。 我会运行该函数加载audio,然后单击播放,它会再次加载它。 可能一直是我没有做正确的事情,所以请随时certificate我错了,并得到这个工作。 什么是我告诉轨道玩,所以这将开始加载,然后我会使用setInterval来查看当前播放时间是否只增加了几个毫秒。 一旦我注意到它开始播放曲目,我立即暂停播放。

3)audio/video标签只支持iOS 4.0及更高版本

解决这个问题没有任何窍门。 它只是事实。


以下是我在开发audio/video标签时的一些帮助:

http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements

祝你好运!

Interesting Posts