title: Dynamically Created Audio Object not playing in Android Chrome browser
body: <p>I'm trying to write a RIA which can be used on both Mobile as well as desktop browsers. One main objective of this app is to play sounds.  There could be X many (as of now, there are 150+)</p>
  
  <p>On a certain user action I want to create a new audio object, load a certain clip, and play it.  Ideally, I'd create a new 'Audio' object, set the src wait for load then play.  This works on various desktop browsers, however seems to fail on Android 4.2, Chrome and stock browsers.</p>
  
  <p>I've tried 4 different ways of including audio:</p>
  
  <ol>
  <li>Including (in html) just an audio block, have it load at runtime and calling .play();  This works however It means I must create 150+ audio blocks. (this works everywhere)</li>
  <li>Create a new instance of 'Audio' and dynamically setting the .src attribute, then on loadcomplete calling .play() (this seems to works only on desktop browsers, NOT on my mobile)</li>
  <li>Use jQuery to Create new audio tag, add to dom,  wait for load then play (this seems to works only on desktop browsers, NOT on my mobile)</li>
  <li>Add Audio tags in html with telling it to not load, wait for user interaction, then load it, wait for it to get ready, then play (this works everywhere).</li>
  </ol>
  
  <p>So, the big question is, any idea why this isn't working?</p>
  
  <p>** Edit **
  I know that only 1 file can be played at a time, and that is what I'm trying to do here. Project is (functionally) similar to a phone service, where you have 1 person record the numbers 0 - 9 , then it 'speaks' a phone number so '5'.'5'.'5'.'0'.'1'..... etc. So 1 audio stream out at a time is perfectly acceptable... It's just getting it to play which is the issue.</p>
  
  <p>As of right now, I have the following code, which can also be found <a href="http://andrewluly.com/tests/sound/" rel="noreferrer">here</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var $a1, $a2, $a3, $a4;
      $(document).ready( function(){
          _setupVars();
          _addListeners();
      })
  
      function _setupVars(){
          $a1 = $( "#audio1");
          $a2 = $( "#audio2");
          $a3 = $( "#audio3");
          $a4 = $( "#audio4");
      }
  
      function _addListeners(){
          $a1.click( _handleAudio1 );
          $a2.click( _handleAudio2 );
          $a3.click( _handleAudio3 );
          $a4.click( _handleAudio4 );
      }
  
      function _handleAudio1 (){
          $("#america")[0].play();
      }
  
      function _handleAudio2 (){
          var a = new Audio();
  
          $(a).on("canplay", function(){
              a.play();
          })
  
          if(a.canPlayType("audio/mp3"))
              a.src = "audio/test2.mp3";
          else if(a.canPlayType("audio/ogg"))
              a.src = "audio/test2.ogg";
      }
  
      function _handleAudio3 (){
          var $x = $('&lt;audio id="says"&gt;'+
                  '&lt;source src="audio/test3.mp3"&gt;'+
                  '&lt;source src="audio/test3.ogg"&gt;'+
                  '&lt;/audio&gt;');
          $x.on("canplay", function(){
              $x[0].play();
          })
          $("#audioCont").append($x);
      }
  
      function _handleAudio4(){
          var $x =$("#cat");
          $x.on("canplay", function(){
              $x[0].play();
          })
          $x[0].load();
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="button" id="audio1" value="play Audio Tag"/&gt;&lt;br /&gt;
      &lt;input type="button" id="audio2" value="play audio object"/&gt;&lt;br /&gt;
      &lt;input type="button" id="audio3" value="play dynamic Audio Tag"/&gt;&lt;br /&gt;
      &lt;input type="button" id="audio4" value="play load Audio Tag, then play"/&gt;&lt;br /&gt;
      &lt;audio id="america"&gt;
          &lt;source src="audio/test1.mp3"&gt;
          &lt;source src="audio/test1.ogg"&gt;
      &lt;/audio&gt;
      &lt;audio id="cat"&gt;
          &lt;source src="audio/test4.mp3"&gt;
          &lt;source src="audio/test4.ogg"&gt;
      &lt;/audio&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>