Safari/iOS上的HTML5音频回调失败

Question

我已经构建了一个应用程序,旨在播放每个声音,因为第一个使用'结束'事件完成.

在我的初始版本中,每个声音都有自己的音频元素,结果如下:

   function play_next_audio(){
        speaker = $('audio#' + sounds[i++]).get(0);
        speaker.addEventListener('ended',play_next_audio);
        speaker.play();
   }

这适用于所有桌面浏览器,包括Safari,但不会超越iOS上的第一个字母.

我也尝试了一种不同的方法 - 一个音频元素依次加载每个声音.在那里,我尝试绑定'结束'事件以及加载第一个和绑定'canplaythrough'事件.在这两种情况下,它甚至无法在桌面Safari上工作 - 这次成功播放前两个字母.

这是孤立的测试:

http://dev.connectfu.com:42001/app/test-sounds.html

请注意,audio.load()被注释掉了几个地方 - 将它放入或放出似乎没有任何区别.

我究竟做错了什么？如何在iOS上播放一系列声音？非常感谢你的帮助!

Answer 1

更新截至2017年,在几种情况下,iOS上的Safari(或Chrome)上不会触发结束事件.更多信息可以在这里找到:它几乎是2017年,HTML5音频仍在iOS上被破坏.

我已经构建了一个HTML5音频播放器(Chavah Messianic Radio),它可以在iOS上的Safari上"运行".

通过"工作",我的意思是,它在Apple瘫痪的iOS <audio>实现上发挥得最好.在撰写本文时,这包括iOS 5.我已经在iPhone 3及更高版本以及iPad原装,iPad 2和iPad 3上进行了测试.

以下是我的发现:

• 在用户交互之前,Apple不允许您在任何音频上调用.play.对我来说,这意味着检测iOS,然后将音乐显示为暂停,直到用户点击播放.他们的理由是这将消耗数据和电池; 但实际上,它只是削弱了网络应用程序,并扼杀了网络的发展.
• 如果要连续播放声音(一个接一个),请使用单个元素.当播放下一个声音时,设置existingAudio.src,然后调用existingAudio.load(),然后调用existingAudio.play().这将允许您播放连续的声音.
• 如果Safari在后台,则不会触发音频事件..如果用户切换到其他应用程序时音频将继续播放,则.ended事件将不会触发.这意味着构建音乐播放器应用几乎是不可能的.

希望这可以帮助.

< rant >

在此期间:Apple,拜托,请在iOS Safari中为我们提供更好的HTML5支持.以下是您的行动项目Apple:

1. 让HTML5音频在后台运行.
2. 支持OGG.
3. 支持预加载音频.
4. 支持并发音频.
5. 让我们播放音频而无需用户互动.

做这些事情,Apple,你将成为移动HTML5音频的行业领导者,每个人都会模仿你,你将再次领先,网络应用程序将在你的平台上完美运行,同时在其他移动平台上瘫痪.是的,这些功能将使用数据和电池,但原生应用已经这样做了.停止削弱网络应用程序并成为领导者.让HTML5 <audio>成为iOS上的一流公民.

</咆哮>

Answer 2

我不相信 iOS 中的音频或视频支持 .play() 方法。苹果不喜欢在访问页面时自动播放视频或音频的想法。

以下是有关跨平台 HTML5 音频支持状态的有用读物：http://www.phoboslab.org/log/2011/03/the-state-of-html5-audio