title: HTML <audio> tag's canplaythrough not firing on mobile
body: <p>I'm playing with HTML 5 <code>&lt;audio&gt;</code> tags. I found it very cool, but just encountered a very weird situation. In short, the <code>canplaythrough</code> doesn't fire on mobile as expected.</p>
  
  <p>In this case, I have a few buttons on a webpage:</p>
  
  <pre><code>&lt;button id="sndbtn01" onclick="createAudioById('01')"&gt;Audio 01&lt;/button&gt;
  &lt;button id="sndbtn02" onclick="createAudioById('02')"&gt;Audio 02&lt;/button&gt;
  &lt;button id="sndbtn03" onclick="createAudioById('03')"&gt;Audio 03&lt;/button&gt;
  &lt;button id="sndbtn04" onclick="createAudioById('04')"&gt;Audio 04&lt;/button&gt;
  </code></pre>
  
  <p>What I expect is to play 01.mp3 when "Audio 01" is clicked, and the similar action for clicking "Audio 02", "Audio 03", "Audio 04" buttons. And I hope the <code>&lt;audio&gt;</code> tag is created when the button clicked, so that I can save traffic without preloading everything.</p>
  
  <p>So, I have the JavaScript code:</p>
  
  <pre><code>  var audioObj = {};
    function createAudioById(id){
      var p = audioObj[id];
      // alert(1)
      if (p != undefined) {
        alert(2);
        p.play();
        return;
      } else {
        alert(3);
        p = new Audio();
        p.addEventListener('canplaythrough', function(e){
          e.currentTarget.removeEventListener('canplaythrough', arguments.callee);
          alert(4);
          p.play();
        });
        p.src = '../snds/'+id+'.mp3';
        audioObj[id] = p;
      }
    }
  </code></pre>
  
  <p>But the behavior is weird on mobile devices:</p>
  
  <p>On Mobile (iPhone):</p>
  
  <ol>
  <li>First click on <code>button 01</code> triggers the <code>(3)</code>, and then nothing happens - the <code>canplaythrough</code> event is never fired and the audio never got played  - NOT as expected: the <code>(4)</code> should fire and audio should get played;</li>
  <li>If I click again on the button, the <code>(2)</code> would trigger and the audio is played. But what's weird is that the <code>(4)</code> is fired a few seconds later after the audio starts to play.</li>
  <li>If I click on the button while the audio is playing, the <code>(2)</code> is triggered and nothing happens, the audio keeps playing - as expected;</li>
  <li>If I click on the button while the audio is done playing, the <code>(2)</code> will triggered, audio played and <code>(4)</code> never pop up - as expected.</li>
  </ol>