As we are hitting the last stride of the #hangoutshackathon we decided it would be a good time to add some fantastical sounds into the mix.

The Hangouts API gives us some help to playback audio files, which is super:

// Create a new sound from a WAV file
var winner = ‘winner.wav’ );

// Play the sound;

But since our gameplay happens atop each hangout-er's video stream the sounds will all play differently for each user depending upon their game. That means that the sound will play for every connected user—not just the one firing the “play” method.

Obviously, that could get rather annoying...

So, if you want to play audio out-of-stream, it is actually very possible to do so. We can do it with a library called SoundManager2, which lets us load and play audio using Flash or the new Audio APIs.

Getting started with SoundManager2 is really easy. After including the SoundManager JS file in your app.xml HTML, you can simply:

var music = soundManager.createSound( {
id: 'music'
, url: self.assetBase + 'Sounds/Music.mp3'
, volume: 50
, autoPlay: false
} );;

There is one caveat to note while using it with Google Hangouts though: you need to be aware of cross-domain interactions. Since you will be loading the SoundManager2 SWF from another domain (instead of the Hangouts domain), you need to use the cross-domain SWFs provided by SoundManager2.

Beyond that, however, it’s just a matter of using your sounds strategically! For example, playing a sound on a shared-state change: function( evt ) {
if( evt.state[ ‘playSound’ ] === 1 ) {;
} );

Now back to the serious business of scoring the magical, mystical, pastry-penetrating world of Donut Horns!!

Shared publiclyView activity