Is playing sound in Javascript performance heavy?

Question

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

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

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

In Chrome, things work quite well. In Firefox, though, each time a collision with a wall happens (=> playSound gets called), there's a pause lasting almost half a second! At first, I thought that the issues were at Math.sqrt, but I was wrong. This is 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 removed the collision lag, and lead me to believe that Math.sqrt isn't causing any problems at all. Just to be sure, though, 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 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?

looks like firefox doesn't support the web audio apis as well as chrome/webkit - you might want to try falling back to a flash plugin, which can play the sound in a separate process/thread (and thus, not block your collision) — lunixbochs
– lunixbochs, Commented Apr 9, 2012 at 19:19
Huh... I'm kinda against that, I think that HTML5 should completely replace Flash, but well, if I have to... — corazza
– corazza, Commented Apr 9, 2012 at 19:25
I think it should replace Flash too, but sadly some browser functionality is much less consistent :) You might want to make sure you're buffering the sound before it needs to be played, like with the html preload="auto" attribute. — lunixbochs
– lunixbochs, Commented Apr 9, 2012 at 19:31

apsillers · Accepted Answer · 2012-04-09 19:36:59Z

I ran into this same delay issue making a sound when the player fires a weapon. My solution was two-fold:

Play each sound at load time and then pause it immediately. This will allow it to resume playing quickly, rather than playing from scratch. Do this play-pause technique after every play of the sound.
Use a pool of <audio> objects for each sound, rather than a single audio object for each sound type. Instead of just using sounds[id], use a 2D array, accessed with sound[id][count]. Here, sound[id] is a list of audio objects that all have the same sound, and count is the index of current object in use for that sound id. With each call to playSound(id), increment the count associated with that id, so that the next call invokes a different audio object.

I had to use these together, because the play-pause technique does a good job of moving the buffering delay to before the sound needs to be played, but if you need the sound rapidly, you'll still get the delay. This way, the most recently used audio object can "recharge" while another object plays.

Filip Dupanović · Accepted Answer · 2012-04-09 19:42:46Z

Two things that might help you is to either utilize Web workers or to precompute several levels of loudness in advance, which you could also do in the background with worker threads. I'm saying this without going into the peculiarities of the Web audio API or how your computing the sound output, but if you've exhausted all other approaches this might be the next direction you should be focusing on.

What's the point of using web workers to precompute? If that's just done once it can as well be executed in the main thread.

Collectives™ on Stack Overflow

Is playing sound in Javascript performance heavy?

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related