I'm developing a browser game where the player can shoot. Everytime he shoots it play a sound.

Currently i'm using this code to play sounds in JavaScript:

    var audio = document.createElement("audio");
    audio.src = "my_sound.mp3";

I'm worried about performance here. Will 10 simultaneous sounds impact my game performance too much?

Will all audio objects stay in memory even after they are played?


You could attach the audio element to the body (Firefox won't play it else) and detach it, when it stops. So you can be sure it doesn't exist in the DOM anymore.

If you do it this way,

  • No, 10 sounds won't impact the performance because they're gone after playback.
  • No, they won't stay in memory because they get detached.
  • 2
    \$\begingroup\$ I found a way to play audio purely in javascript: new Audio("file.mp3").play();. I guess this way it won't exist after it ends or when the garbage collector decides to collect it. \$\endgroup\$ – João Aug 2 '13 at 17:56
  • \$\begingroup\$ and it works in ff? \$\endgroup\$ – andy Aug 2 '13 at 20:21
  • \$\begingroup\$ Yes, it works in FF. \$\endgroup\$ – João Aug 2 '13 at 20:35

Use the Web Audio API.

The HTML5 audio tag was designed and implemented with use cases in mind of: streaming music, playing podcasts, and offering visual controls to users. The use case of playing many samples and triggering them at specific times was addressed later, and web standards discussions have evolved to offering that functionality in the Web Audio API.

The downside of the Web Audio API is complexity, but the additional power and quality is well worth it.

Check out samples.

Consider using a sound library to simplify use, e.g. search for "html5 audio library for games". Some results include SoundJS and SoundManager2.


I did a lot of research into the Audio API awhile back. The main problem I found with the Audio API is the fact that any time an Audio element is declared, it will download the Audio file, regardless if that file had been downloaded before. This means that if you use new Audio('file.mp3').play(), this will cause an HTTP request to the audio file every time. Even if you use audio.cloneNode().play, it will download the file every time. Since the sound you want is a sound effect, it will probably play many times throughout the game. The longer the game runs, the more HTTP requests you will make to the server.

Since you want to have overlapping sound effects, you must have multiple Audio elements. A solution I came up with was to create the minimal amount of Audio elements you need (the maximum number of sounds that can overlap at any given time), and then just reuse the elements when you can. This will save on HTTP requests in the long run and be the most conservative for performance. I still don't know if this is the best solution, but I haven't run into any other solutions that take into account the HTTP request problem.


Instead of pointlessly trying to manipulate the DOM, use the Audio object to play sounds instead of the HTML tag.

var audio = new Audio();

audio.addEventListener('canplaythrough', function(){

audio.src = 'my_sound.mp3';

Also, why can't you reuse the audio object to play the same sound multiple times? There's no need to create multiple audio objects, unless you want your sound to be able to overlap with itself.

  • \$\begingroup\$ Yes, they need to overlap \$\endgroup\$ – João Aug 3 '13 at 4:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.