Sign in to follow this  

html5/javascript best way to add sound

Recommended Posts

I have been working on one of my first ever games, which is a game developed with the html5 canvas element and javascript. I am at the stage where really all I need to do now is add sound and music. here is what I am looking to do:


  • A song that plays whenever the game is played, this should also loop.(Basically just a game soundtrack that always plays.)
  • A clicking sound effect for when a button is clicked on.
  • A sound effect for when the player collects a coin.
  • A sound effect for when the player dies.


I know that you can have an html audio file, however this requires the user to click a play button for the music to begin. I was wondering if the follow is possible:


  • Add a html audio element.
  • Use css to style it to be invisible.
  • Create a function in javascript which plays the required sound. So I would call the function which plays the game music from the beginning, and a clicking sound function when a button is presses etc. 

Would this be possible or is there a better way entirely to achieve this.

Share this post

Link to post
Share on other sites
Exactly that is possible.

For background music this will work perfectly well in most cases.

sound effects will be subject to varying degrees of latency, however, so don't expect frame-accurate sound effects. This may or may not be a big deal to you.

Some mobile browsers (iOS browser, last I heard) only support one concurrently-playing audio element though, so you'd want to detect that and disable sound effects.

There's also the WebAudio API on Chrome and/or Mozilla, but its not standard. Hopefully it will be in the future.

Share this post

Link to post
Share on other sites

The best thing to do is to use the WebAudio api, and fallback to creating Audio elements if WebAudio is not supported. The reason you want to fallback to the Audio tag is because it is very limited. I find that IE doesn't do a great job with multiple Audio elements. Chrome doesn't do a good job either. Last time I checked - Chrome creates TWO threads for each Audio element, and there is a hard limit of 100 threads (I think), so if you're not careful your app will crash, randomly, and you'll have no idea why.

The chrome://media-internals/ about page can help you see how many are in use due to Audio. 


You will also need to create audio in MP3 format and OGG format since IE does not currently support OGG, and last time I checked, Firefox does not support MP3.

Mozilla actually does not support WebAudio yet, but it is in the works.



HTML5 audio is a pain if you're doing something advanced.


If you don't want to deal with this stuff yourself, then you can just use an audio framework like Howlerjs

Share this post

Link to post
Share on other sites

Definitly WebAudio API. But, you're not going to find perfect support for sound yet. I personally prefer to not include audio in my HTML5 games at this point. HTML5 is about cross-platform compatibility, and audio in HTML5 currently fails in that regard.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this