title: Playing multiple one shot sound effects at the same time on mobile browsers?
body: <p>I'm trying to play a sound effect when the user clicks a button in my web app.</p>
  
  <p>I first tried this method:</p>
  
  <pre><code>var sound = new Audio("soundeffect.ogg");
  function clickHandler(){
      sound.play();
  }
  </code></pre>
  
  <p>However, if the user presses the button twice in quick succession, the sound is only played once. I assumed this is because the sound hasn't finished playing, and therefore isn't rewinded.</p>
  
  <p>I then tried this solution.</p>
  
  <pre><code>var sound = new Audio("soundeffect.ogg");
  function clickHandler(){
      sound.currentTime = 0;
      sound.play();
  }
  </code></pre>
  
  <p>However, this causes the first sound to cut off before the next one is played.</p>
  
  <p>I then tried this version, which creates a new sound effect each time the button is clicked:</p>
  
  <pre><code>function clickHandler(){
      var sound = new Audio("soundeffect.ogg");
      sound.play();
  }
  </code></pre>
  
  <p>This works perfectly on my developer machine, but using android chrome on mobile data, the sound effect seems to have to load each time the button is clicked, causing a delay of several seconds before the sound is played.</p>
  
  <p>I was hoping declaring the sound effect in the global scope, then cloning it might help keep it in the cache, but it didnt seem to help.</p>
  
  <pre><code>var sound = new Audio("soundeffect.ogg");
  function clickHandler(){
      var oneShotSound = sound.cloneNode();
      oneShotSound.play();
  }
  </code></pre>