title: HTML5 audio object doesn't play on iPad (when called from a setTimeout)
body: <p>I have a page with a hidden <code>&lt;audio&gt;</code> 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):</p>
  
  <pre><code>// Works fine on all browsers
  
  constructor: (@_button, @_audio) -&gt;
    @_button.on 'click', @_play          // Bind button's click event with jQuery
  
  _play: (e) =&gt;
    @_audio[0].play()                    // Call play() on audio element
  </code></pre>
  
  <p>The audio plays fine when triggered from a function bound to a <code>click</code> event, but I actually want an animation to complete before the file plays so I put <code>.play()</code> inside a <code>setTimeout</code>. However I just can't get this to work:</p>
  
  <pre><code>// Will not play on iPad
  
  constructor: (@_button, @_audio) -&gt;
    @_button.on 'click', @_play          // Bind button's click event with jQuery
  
  _play: (e) =&gt;
    setTimeout (=&gt;                       // Declare a 300ms timeout
      @_audio[0].play()                  // Call play() on audio element
    ), 300
  </code></pre>
  
  <p>I've checked that <code>@_audio</code> (<code>this._audio</code>) is in scope and that its <code>play()</code> method exists. Why doesn't this work on iPad?</p>
  
  <p><strong>Edit</strong>: As it happens, the simplified test case above actually <em>does</em> work. See @apsillers' answer below and my comments on it.</p>