Mobile Safari：音频+缓存清单 [英] Mobile Safari: Audio + cache manifest
问题描述
我有一个小型网络应用程序，只需点击几个按钮即可播放非常短的声音位。它明确地针对iOS（iPad）上的移动Safari。
在此处和其他地方阅读HTML5音频的几个缺点，在此上下文中在移动Safari上尝试了一些黑客和技巧，我陷入了一种情况，即Safari似乎只是（因为缺少一个更好的词）被打破：
我可以播放声音A（它点击按钮A需要很长时间才能开始 - 我假设它正在下载[再次]？）之后，点击按钮B将立即再次播放声音A.对于按钮C也是如此。在某些情况下，它会播放不同的声音，有时甚至是正确的声音。但主要是声音A.使用的格式是.aiff，现在是.m4a。
自己写了几个小版本后，我决定选择 Buzz 库来处理声音加载/播放等等。
<有趣的是，他们的演示包括一个游戏，它几乎完全符合我的需要和触发相同的错误行为。我甚至最终处于任何标签中的移动Safari中的任何音频播放器都会在Buzz演示游戏（！）中播放某种声音的情况。
我希望缓存清单可能有助于克服苹果预加载限制并强制应用程序在离线模式下按下按钮后立即播放声音。但在确认整个应用程序已被缓存后，我无法在离线模式下播放/听到任何声音。
有没有人设法得到这样的东西以某种方式工作？（ - 看过Apple如何处理某些事情，我不希望得到太多回应，但是......）
更新1：
此答案中的示例会产生相同的效果：如何在iPad上使用HTML5 / Javascript合成音频
更新2：
更新iOS（和所以Safari）似乎解决了音频错误。但是，缓存清单似乎不会影响音频文件。这些文件根本不可用。
删除缓存清单后，应用程序工作正常，但将其添加到主屏幕并重新加载它会阻止来自也好。
我希望我能告诉你一个神奇的公式让你的所有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
祝你好运！
I'm having a small web app, which plays really short sound bits on the click of several buttons. It explicitly targets mobile Safari on iOS (iPad).
After reading here and elsewhere about the several "shortcomings" of HTML5 audio in this context on mobile Safari and trying a few "hacks" and tricks, I'm stuck with a situation where Safari seems simply (for the lack of a better word) broken:
I can play sound A (it takes a long time for it to start — I'm assuming it's downlading [again]?) on the click of button A. After that, clicking on button B will immediately play the sound A again. Same for button C. In some cases it will play a different sound, sometimes even the right one. But mostly sound A. The format in use was .aiff, is now .m4a .
After writing a few tiny versions myself, I decided to go with the Buzz library to handle the sound loading/playing/etc..
Funnily enough, their demo includes a game, which does pretty much exactly what I need and triggers the same faulty behavior. I even ended up in a situation where any audio player in mobile Safari in any tab would play a certain sound out of the Buzz demo game (!).
I was hoping a cache manifest might help overcome Apples preloading limitations and force the app to play the sound right after hitting the button in offline mode. But after confirming that the whole app had been cached, I can't play/hear any sound in offline mode.
Has anyone managed to get something like this to work somehow? (— Having seen how Apple handles certain things, I' don't expect much response, though… )
Update 1:
The example in this answer causes the same effect: How to synthesize audio using HTML5/Javascript on iPad
Update 2:
Updating iOS (and so Safari) seems to resolve the audio bug. The cache manifest doesn't seem to effect audio files, though. These files are just not available at all.
After removing the cache manifest the app works okay, but adding it to the "home screen" and reloading it prevents the audio from playing as well.
I wish I could tell you there's a magic formula to get all your html5 media to work perfectly, but there isn't. Mobile support for HTML5 audio/video is pretty poor right now; much further behind than its desktop predecesors. To make matters worse, each of the different platforms handle it differently and most of them only support it in semi-recent versions.
However, there are some tricks you can employ to get media files to work correctly in mobile Safari. In order to explain them, you'll need to understand some of its shortcomings.
1) You can't load multiple audio / video files
Its been my experience that the browser will only load one file at a time. If you play one file, go and play another, and then come back and it'll just load that file all over again. And, although I didn't try it myself, I don't believe a cache manifest will help you here.
What I had to do is combine all my audio files into one large audio file. Then, depending on which audio track was requested, I'd move the play position to the appropriate starting position and play that track. Then, I'd use a setInterval to examine the playback every few milliseconds to determine if the current play position hit the end of the track. Once it did, I paused it. Pluis, I gave myself a few seconds (2-3) between each track, just in case the phone's CPU was under a lot of load and checked the feed a little too late.
2) You can't auto-play audio / video files
Apple built into their HTML5 media tag technology the limitation that these tracks would only load and play in response to a user click event. That way, developers couldn't auto-play annoying tracks when you went to their websites.
When I was using audio/video tags, I was trying to build a rich media advertisement. So I hooked my audio/tracks loading to the banner click event, when you click a banner and expand the advertisement.
What I'd suggest you should do is have a small lightbox popup come up, asking the user if they want to turn on/off sound. You can attach your load functions to the click event of that popup box, regardless if the user turns the sound on or off.
Personally, I didn't have much luck using the load() function. I'd run that function to load the audio and then click play and it would just load it again. It could have always been that I just didn't do it right, so feel free to prove me wrong and get that working. What did is I told the track to play, so that way it would start loading, and then I'd use a setInterval to see if the current play time incremented just a few milliseconds. Once I noticed that it started to play the track, I'd immediately pause it.
3) Audio/Video tags are only supported in iOS 4.0 and higher
There's no trick to getting around this. Its just the facts.
Here's a few sites that helped when when I was developing with audio/video tags:
http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements
Good luck!
这篇关于Mobile Safari：音频+缓存清单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
