Tengo una página con un oculto<audio> objeto que se está iniciando y se detiene mediante un botón personalizado a través de javascript. (La razón es que quiero personalizar el botón, y que dibujar un reproductor de audio parece destruir el rendimiento de renderizado en el iPad de todos modos). Un ejemplo simplificado (en 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

El audio se reproduce bien cuando se dispara desde una función vinculada a unclick evento, pero en realidad quiero que se complete una animación antes de que se reproduzca el archivo, así que puse.play() dentro de unasetTimeout. Sin embargo, simplemente no puedo hacer que esto funcione:

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

He comprobado que@_audio (this._audio) está en alcance y que suplay() El método existe. ¿Por qué no funciona esto en iPad?

Editar: Como sucede, el caso de prueba simplificado anterior en realidadhace trabajo. Vea la respuesta de @apsillers a continuación y mis comentarios al respecto.