Geek Answers Handbook

In HTML5, can I play the same sound more than once at the same time?

I make a game that often plays sounds. I noticed that the sound will not play again while it is playing. For example, a player collides with a wall, the sound "kick" is played. But if a player collides with one wall and then quickly collides with another wall, only one “kick” sound is played, and I believe that this happens because the first sound did not end. It's true? How can I avoid this? I thought about preloading the sound three times, always playing another copy of that sound, but it seems pretty dumb ...

SOLVE:

It turns out that I was right ... You need to preload several versions of the sound, and then play them circularly.

THE CODE:

var ns = 3; //The number of sounds to preload. This depends on how often the sounds need to be played, but if too big it will probably cause lond loading times. var sounds = []; //This will be a matrix of all the sounds for (i = 0; i < ns; i ++) //We need to have ns different copies of each sound, hence: sounds.push([]); for (i = 0; i < soundSources.length; i ++) for (j = 0; j < ns; j ++) sounds[j].push(new Audio(sources[i])); //Assuming that you hold your sound sauces in a "sources" array, for example ["bla.wav", "smile.dog" "scream.wav"] var playing = []; //This will be our play index, so we know which version has been played the last. for (i = 0; i < soundSources.length; i ++) playing[i] = 0; playSound = function(id, vol) //id in the sounds[i] array., vol is a real number in the [0, 1] interval { if (vol <= 1 && vol >= 0) sounds[playing[id]][id].volume = vol; else sounds[playing[id]][id].volume = 1; sounds[playing[id]][id].play(); ++ playing[id]; //Each time a sound is played, increment this so the next time that sound needs to be played, we play a different version of it, if (playing[id] >= ns) playing[id] = 0; }
+8
javascript html5 html5-audio audio
source share
4 answers

Download the sound several times to simulate polyphony. Play them in a circular way. Check out my demo at matthewtoledo.com . In particular, the _initSoundBank () function

+2
source share

You can clone an audio element. I don’t know if you can play them more than once at a time, but here is how you can play sound more than once without loading it more than once.

 var sound = document.getElementById("incomingMessageSound") var sound2 = sound.cloneNode() sound.play() sound2.play()

I know this works for chrome, and this is the only place I needed. Good luck

+4
source share

Yes, a single <audio> object can play only one track at a time. Consider that the <audio> object has a currentTime attribute that indicates the current position of the audio track: if the <audio> object could play several tracks once, what value would currentTime reflect?

See my solution for an add-on to this problem at Is audio playback at high performance Javascript? . (Basically, add duplicate <audio> tags with the same sound.)

+1
source share

Although it is only implemented in FireFox and Chrome right now, in the future you should use the WebAudio API , which is specifically designed for games and audio applications in the browser.

There you can play any sound several times and do some more interesting things with it.

A good tutorial for this is here: http://www.html5rocks.com/en/tutorials/webaudio/games/

0
source share

More articles:


All Articles