Is playing sound in javascript hard?

Question

I am making a simple Javascript game in which, when an object collides with a wall, it plays a “dull” sound. This sound volume depends on the speed of the subject (higher speed => louder than sound).

Play function:

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(); } 

As I call it:

 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 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. 

Everything works very well in Chrome. In Firefox, however, every time there is a collision with a wall (=> playSound ), the pause lasts for almost half a second! At first I thought the problems were in Math.sqrt , but I was wrong. Here's how I tested it:

 //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; 

This completely eliminated the collision delay and made me believe that Math.sqrt not causing any problems. To be sure, I did this:

 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; 

And the backlog is back! Now I am sure that sound reproduction is causing problems. I'm right? Why is this happening? How to fix it?

Answer 1

I faced the same delay problem as the sound when a player shoots a weapon. My solution was twice:

• Play each sound during loading, and then immediately pause it. This will allow him to resume the game quickly, and not play from scratch. Pause this technique each time you play a sound.

• Use the <audio> object pool for each sound, and not for one audio object for each type of sound. Instead of using sounds[id] use a 2D array accessed using sound[id][count] . Here, sound[id] is a list of sound objects, all of which have the same sound, and count is the index of the current object that is used for this sound identifier. Each time playSound(id) call playSound(id) increment the counter associated with this identifier so that the next call will call a different sound object.

I had to use them together because the play-pause technique does a good job of moving the buffering delay before the sound needs to play, but if you need fast sound, you'll still get a delay. Thus, the last used audio object can be “recharged” when another object is playing.

Answer 2

Two things that can help you are either using webmasters or predicting several volume levels in advance, which you can also do in the background with workflows. I am talking about this without going into the features of the web audio API or how your calculations go into sound, but if you have exhausted all other approaches, this may be the next direction you should focus on.