Techniques for creating sound effects in a browser based game?

Question

The <audio> tag and the <object> tag are (somewhat hard to use) ways to embed audio on a page... ...but what about creating sound effects in a browser-based game? E.g. if the game becomes aware you died, I plan to have some music play on the "you're dead" page. But what about some kind of fighting sound when people click an "attack" link, or the sound of flowing water when they click to "heal".

Do I essentially have to look into embedding an invisible flash widget like facebook does for some of it's sounds in order to make this work, or are there other approaches?

Answer 1

You can trigger audio that is loaded in <audio> or <object> tags in a couple of ways.

In HTML5-compatible browsers like Firefox, Chrome, IE9, and Safari this is accomplished like so:

<audio id="attack">
  <source src="attack.wav">
</audio>
<audio id="heal">
  <source src="heal.wav">
</audio>

<a href = "#" onclick="document.getElementById('attack').play()">Click to Attack</a>
<a href = "#" onclick="document.getElementById('heal').play()">Click to Heal</a>

The "#" link is just to make sure that you don't go to a new page. I recommend using WAV files for short sounds -- WAV is compatible with basically every browser, and as long as your total sound effects end up less than maybe 1MB you should be okay. Otherwise you'll have to include both an .OGG and .MP3 files for each sound effect inside the tag, like so:

<audio id='attack'>
  <source src='attack.ogg'>
  <source src='attack.mp3'>
</audio>
<audio id='heal'>
  <source src='heal.ogg'>
  <source src='heal.mp3'>
</audio>

<a href = "#" onclick="document.getElementById('attack').play()">Click to Attack</a>
<a href = "#" onclick="document.getElementById('heal').play()">Click to Heal</a>

If you want to get this to work on IE7 and IE8 then you'll need to fall back on the <object> tag. There's a good example of that available in this article.