HTML5音频对象并不在iPad（从setTimeout的调用时）玩 [英] HTML5 audio object doesn't play on iPad (when called from a setTimeout)

问题描述

我有一个隐藏的℃的页面;音频＆GT;后者正在启动对象，并通过JavaScript使用自定义按钮来停止。 （原因是我希望自定义按钮，在绘制音频播放器似乎反正摧毁iPad上的渲染性能）。一个简单的例子（在CoffeeScript中）：

I have a page with a hidden <audio> object which is being started and stopped using a custom button via javascript. (The reason being I want to customise the button, and that drawing an audio player seems to destroy rendering performance on iPad anyway). A simplified example (in 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

从绑定到一个点击事件，但其实我是想一个动画来完成文件播放之前，所以我把<$ C $函数触发时，音频播放罚款C> .play（）在的setTimeout 。但是我不能得到这个工作：

The audio plays fine when triggered from a function bound to a click event, but I actually want an animation to complete before the file plays so I put .play() inside a setTimeout. However I just can't get this to work:

// 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

我已经签了 @_音频（ this._audio ）的范围，并且其播放（）方法存在。为什么在iPad上没有这项工作？

I've checked that @_audio (this._audio) is in scope and that its play() method exists. Why doesn't this work on iPad?

修改：碰巧的是，简化的测试案例其实以上的确实的工作。请参阅下面@apsillers的答案，我就可以了意见。

Edit: As it happens, the simplified test case above actually does work. See @apsillers' answer below and my comments on it.

推荐答案

请参阅Apple's iOS的注意事项指南：

... JavaScript的播放（）和负荷（）方法也没有改变，直到用户开始播放除非播放（）或负荷（）方法由用户操作触发。换句话说，用户启动的播放按钮的作品，而是一个的onLoad =播放（）事件不会。

...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 本身是在一个用户启动的功能

It appears that your setTimeout callback does not qualify as user-initiated action, despite the fact that the setTimeout itself was in a user-initiated function.

建议：我没有iOS设备上测试，但也许做一个初步播放/暂停，当用户presses按钮wiil解除此限制。也就是说，你叫播放，然后暂停一次，的然后的使您的来电动画和的setTimeout 与播放通话功能。这使得用户启动的功能，让iOS的知道，这是正常加载并在未来发挥这部影片。

Suggestion: I don't have an iOS device to test on, but maybe doing an initial play/pause when the user presses the button wiil relieve this restriction. That is, you call play and then pause it at once, then make your call to animate and the setTimeout function with the play call. This makes the user-initiated function let iOS know that it is okay to load and play this video in the future.

这篇关于HTML5音频对象并不在iPad（从setTimeout的调用时）玩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！