title: Playing multiple sounds in Chrome
body: <p>I am developing a HTML5 game for Facebook. I have the following HTML code: </p>
  
  <pre><code>&lt;audio style="visibility: hidden;" controls="controls" id="sound-0"&gt;
      &lt;source src="sound/sound_new.ogg" type="audio/ogg"/&gt;
      &lt;source src="sound/sound_new.mp3" type="audio/mp3"/&gt;
  &lt;/audio&gt;
  &lt;audio style="visibility: hidden;" controls="controls" id="sound-1"&gt;
      &lt;source src="sound/sound_new.ogg" type="audio/ogg"/&gt;
      &lt;source src="sound/sound_new.mp3" type="audio/mp3"/&gt;
  &lt;/audio&gt;
  &lt;audio style="visibility: hidden;" controls="controls" id="sound-2"&gt;
      &lt;source src="sound/sound_new.ogg" type="audio/ogg"/&gt;
      &lt;source src="sound/sound_new.mp3" type="audio/mp3"/&gt;
  &lt;/audio&gt;
  &lt;audio style="visibility: hidden;" controls="controls" id="sound-3"&gt;
      &lt;source src="sound/sound_new.ogg" type="audio/ogg"/&gt;
      &lt;source src="sound/sound_new.mp3" type="audio/mp3"/&gt;
  &lt;/audio&gt;
  &lt;audio style="visibility: hidden;" controls="controls" id="sound-4"&gt;
      &lt;source src="sound/sound_new.ogg" type="audio/ogg"/&gt;
      &lt;source src="sound/sound_new.mp3" type="audio/mp3"/&gt;
  &lt;/audio&gt;
  &lt;audio style="visibility: hidden;" controls="controls" id="sound-5"&gt;
      &lt;source src="sound/sound_new.ogg" type="audio/ogg"/&gt;
      &lt;source src="sound/sound_new.mp3" type="audio/mp3"/&gt;
  &lt;/audio&gt;
  </code></pre>
  
  <p>And the following Javascript that starts the sounds:</p>
  
  <pre><code>if (this.hitFlag &gt; 6) this.hitFlag = 1;
  var soundElem = document.getElementById('sound-' + (this.soundFlag % 6) + '0' );
  soundElem.play();
  </code></pre>
  
  <p>Each click of the mouse triggers a sound event. The problem is with Chrome where after dozen of clicks the sounds disappear or start playing with quite a big delay(a dozen of seconds).
  But there is no problem when playing in FF or Opera.</p>