移动 Safari：音频 +缓存清单
我有一个小型网络应用程序，只需单击几个按钮即可播放非常短的声音。它明确针对 iOS (iPad) 上的移动 Safari。
在阅读了这里和其他地方关于移动 Safari 上 HTML5 音频在这种情况下的几个“缺点”并尝试了一些“技巧”和技巧之后，我陷入了 Safari 看起来很简单的情况（因为缺乏更好的词）损坏：
我可以在单击按钮 A 时播放声音 A（需要很长时间才能启动 - 我假设它[再次]下载？）。之后，单击按钮 B 将立即再次播放声音 A 。按钮 C 也是如此。在某些情况下，它会播放不同的声音，有时甚至是正确的声音。但主要是声音 A。使用的格式是 .aiff ，现在是 .m4a 。
在自己编写了几个小版本之后，我决定使用 Buzz 库来处理声音加载/播放/etc..
有趣的是，他们的演示包括一个游戏，它几乎完全符合我的需要并且触发相同的错误行为。我什至遇到了这样的情况：移动 Safari 中任何选项卡中的任何音频播放器都会播放 Buzz 演示游戏中的特定声音（！）。
我希望缓存清单可以帮助克服苹果的预加载限制，并强制应用程序在离线模式下按下按钮后立即播放声音。但在确认整个应用程序已被缓存后，我无法在离线模式下播放/听到任何声音。
有没有人设法让这样的东西以某种方式工作？（——在了解了苹果如何处理某些事情后，我不期望有太多的回应……）
更新 1：
这个答案中的示例会产生相同的效果：如何在 iPad 上使用 HTML5/Javascript 合成音频
更新 2：
更新 iOS（以及 Safari）似乎可以解决音频错误。不过，缓存清单似乎不会影响音频文件。这些文件根本不可用。
删除缓存清单后，应用程序可以正常工作，但将其添加到“主屏幕”并重新加载也会阻止音频播放。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我希望我能告诉您有一个神奇的公式可以让所有 html5 媒体完美运行，但事实并非如此。目前对 HTML5 音频/视频的移动支持相当差；比它的桌面前身落后得多。更糟糕的是，每个不同的平台对其处理方式都不同，并且大多数平台仅在半新版本中支持它。
不过，您可以采用一些技巧来使媒体文件在移动 Safari 中正常工作。为了解释它们，您需要了解它的一些缺点。
1) 无法加载多个音频/视频文件
根据我的经验，浏览器一次只能加载一个文件。如果您播放一个文件，请去播放另一个文件，然后回来，它会重新加载该文件。而且，虽然我自己没有尝试过，但我不相信缓存清单会对您有所帮助。
我所要做的就是将所有音频文件合并为一个大音频文件。然后，根据请求的音轨，我将播放位置移动到适当的起始位置并播放该曲目。然后，我将使用 setInterval 每隔几毫秒检查一次播放，以确定当前播放位置是否到达曲目末尾。一旦完成，我就暂停了。另外，我在每个曲目之间给自己留了几秒钟（2-3）秒的时间，以防手机的 CPU 负载过大，检查提要有点太晚了。
2) 无法自动播放音频/视频文件
苹果公司在其 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 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!