HTML5 audio object doesn't play on iPad (when called from a setTimeout)
- by Dan Halliday
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
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
I've checked that @_audio (this._audio) is in scope and that its play() method exists. Why doesn't this work on iPad?
