javascript - HTML5 音频对象不在 iPad 上播放(当从 setTimeout 调用时)

Question

我有一个隐藏的页面 <audio>通过 javascript 使用自定义按钮启动和停止的对象。 (原因是我想自定义按钮，而且绘制音频播放器似乎无论如何都会破坏 iPad 上的渲染性能)。一个简化的例子(在 coffeescript 中):

// Works fine on all browsers

constructor: (@_button, @_audio) ->
  @_button.on 'click', @_play          // Bind button's click event with jQuery

_play: (e) =>
  @_audio[0].play()                    // Call play() on audio element

当从绑定(bind)到 click 的函数触发时，音频播放正常事件，但我实际上想要在文件播放之前完成动画，所以我放了 .play()在 setTimeout 里面.但是我就是不能让它工作:

// Will not play on iPad

constructor: (@_button, @_audio) ->
  @_button.on 'click', @_play          // Bind button's click event with jQuery

_play: (e) =>
  setTimeout (=>                       // Declare a 300ms timeout
    @_audio[0].play()                  // Call play() on audio element
  ), 300

我检查过 @_audio ( this._audio ) 在范围内并且它的 play()方法存在。为什么这在 iPad 上不起作用？

编辑:碰巧的是，上面的简化测试用例实际上确实有效。请参阅下面的@apsillers 的回答和我对此的评论。

Answer 1

参见 Apple's iOS considerations guide :

...the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

看来您的 setTimeout() 回调不符合用户启动的操作，尽管 setTimeout() 本身在用户启动的函数中.

建议:我没有要测试的 iOS 设备，但也许在用户按下按钮时进行初始播放/暂停会解除此限制。也就是说，您调用 play() 然后立即暂停它，然后调用 animate 和 setTimeout() 函数play() 调用。这使得用户启动的功能让 iOS 知道以后可以加载和播放此视频。