Posts Tagged ‘audio’

HTML5 Audio Is Here (Sorta)

Posted in Programing, Web Development on September 8th, 2011 by Jarred – Comments Off on HTML5 Audio Is Here (Sorta)

Figuring out how to implement a pure HTML5 Audio solution for my game was quite a chore. I found countless threads and post complaining that audio support is just not there yet and that the best thing to do is use flash based solutions (like the SoundManager 2 script). However, I found other information which lead me to believe it could be done. After much searching and trial and error I figured out something that would work and that would preload the sounds before the game would start. My ultimate solution was pure HMTL5 without the use of a script and used a variety of techniques I gleaned from reading others posts and blogs(mostly stackoverflow).

Here is how I did it:

First I load all the game sounds using HTML audio elements in the body of my page. You have to provide at least a .mp3 file and a .ogg file to be compatible with most browsers. Also, If you plan on doing multi-shot sounds (sounds that can be played overlapping themselves such as a rapid fire gun sound in a game) you will have to load multiple instance of them into separate audio elements (Many of my sounds have 5 or 6 instances of themselves)

<audio id=”gun_sound_1″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
</audio>
<audio id=”gun_sound_2″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
</audio>
<audio id=”gun_sound_3″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
</audio>

Secondly the JavaScript

//Create a counter for the sound
gunSound_counter = 1

//Variable holding the number of audio elements that exist
gunSound_maxNumber = 3;

function playSound_html5(soundName)
{
//Add the counter suffix
soundToPlay = soundName+gunSound_counter;

//Play The Sound
audioElement = document.getElementById(soundToPlay);
audioElement.play();

// For Multi-Shot sounds Increment the counter. If counter is at the max reset to one
if (gunSound_counter >= gunSound_maxNumber)
gunSound_counter = 1;
else
gunSound_counter++;
}

Now when ever I want to play the sound I just call the playSound function and pass it a string with the name of the sound I want to play (without the number suffix).

playSound_html5(‘gun_sound_’);

I am pretty sure there is likely more eloquent ways to do this, but hopefully this can help you get a good start.

Update: Upon reading this it now looks like the SoundManager 2 now offers support (beta) for HTML5 audio. Looks like I will have to check this out on my next game cause sound really was just a pain.

 

Some of the sources I used:
http://stackoverflow.com/questions/1933969/sound-effects-in-javascript-html5
http://stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events
http://stackoverflow.com/questions/6312714/adding-event-listener-to-audio-html5-tag-in-javascript
http://stackoverflow.com/questions/3566967/how-to-stop-audio-played-by-audio-tag-of-html5
http://diveintohtml5.org/everything.html
http://www.webdeveloper.com/forum/showthread.php?t=194442
http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/
http://bioinfornetics.blogspot.com/2011/02/how-to-resetrestart-position-of-html5.html