Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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?

share|improve this question
1  
What browsers are you targeting? –  AttackingHobo Jan 18 '11 at 21:30
    
Erm, it's not a corporate site, so I try to avoid IE7 and IE6, so for simplicity's sake, ie8, webkit, and the latest version of safari. –  Kzqai Jan 21 '11 at 3:00
    
Err, latest version of Firefox, that is. –  Kzqai Jan 21 '11 at 4:07

1 Answer 1

up vote 4 down vote accepted

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.

share|improve this answer
    
And a note: this won't be a super robust solution. If you click on the link a bunch of times in a row, you'll only hear the sound once. –  DariusK Jan 18 '11 at 23:28
    
Also be sure to test your game on a computer with no audio devices! At least in the past, having html-audio caused a pop-up dialog appear every single time.. –  Jari Komppa Jan 19 '11 at 6:34
    
Nice, I had no idea the api for the audio stuff was so simple for basic stuff, I'll have to persue that. –  Kzqai Jan 21 '11 at 2:58
    
Awesome. By the way... do you think you could mark my answer as accepted? I could use the karma! –  DariusK Jan 24 '11 at 21:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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