title: Is playing sound in Javascript performance heavy?
body: <p>I'm making a simple game in Javascript, in which when an object collides with a wall, it plays a "thud" sound. That sound's loudness depends on the object's velocity (higher velocity => louder sound).</p>
  
  <p>The play function:</p>
  
  <pre><code>playSound = function(id, vol) //ID of the sound in the sounds array, volume/loudness of the sound
  {
      if (vol) //sometimes, I just want to play the sound without worrying about volume
          sounds[id].volume = vol;
      else
          sounds[id].volume = 1;
  
      sounds[id].play();
  }
  </code></pre>
  
  <p>How I call it:</p>
  
  <pre><code>playSound(2, Math.sqrt(p.vx*p.vx + p.vy*p.vy)/self.TV); //self.TV stands for terminal velocity. This calculates the actual speed using the basic Pythagora's theorem and then divides it by self.TV, which results in a number from 0 to self.TV. 2 is the id of the sound I want to play.
  </code></pre>
  
  <p>In Chrome, things work quite well. In Firefox, though, each time a collision with a wall happens (=> <code>playSound</code> gets called), there's a pause lasting almost half a second! At first, I thought that the issues were at <code>Math.sqrt</code>, but I was wrong. This is how I tested it:</p>
  
  <pre><code>//playSound(2, 1); //2 Is the id of the sound I want to play, and 1 is max loudness
  Math.sqrt(p.vx*p.vx + p.vy*p.vy)/self.TV;
  Math.sqrt(p.vx*p.vx + p.vy*p.vy)/self.TV;
  Math.sqrt(p.vx*p.vx + p.vy*p.vy)/self.TV;
  </code></pre>
  
  <p>This completely removed the collision lag, and lead me to believe that <code>Math.sqrt</code> isn't causing any problems at all. Just to be sure, though, I did this:</p>
  
  <pre><code>playSound(2, 1); //2 Is the id of the sound I want to play, and 1 is max loudness
  //Math.sqrt(p.vx*p.vx + p.vy*p.vy)/self.TV;
  //Math.sqrt(p.vx*p.vx + p.vy*p.vy)/self.TV;
  //Math.sqrt(p.vx*p.vx + p.vy*p.vy)/self.TV;
  </code></pre>
  
  <p>And the lag was back! Now I'm sure that playing a sound causes problems. Am I correct? Why is this happening? How do I fix it?</p>