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.

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