HTML5, WinJs

SFX in WinJS

When working on my entry for the Js13kGames contest I was looking for a synthesizer or sound generator for HTML5. I came across a javascript port of an a synthesizer in actionscript. It’s build by David Humphrey. Markus Neubrand added the parameter strings. It is available on github. Due to the time limit I only got it to work in Firefox at the time, but the library works in Chrome too. Unfortunately Internet Explorer is not supported.

But, when porting the code to an Windows Store app I suddenly noticed that the sounds worked.

I’ve created a small module around the synthesizer and parameters to make it a little easier to play sounds. Depending on how often sounds are required you can have more channels to play sounds simultaneously. By default you can play 4 sounds at a time with my module. Initialize it as follows.

First create a new audio object and initialize it. This creates a couple of HTML5 audio elements, one for each channel. Than it initialized the synthesizer. Next, two sound effects are stored by providing a key to identify them and a string containing a lot of numbers. These numbers are the parameters for the synthesizer. More on this later.

var sound = new audio(); 
sound.init(); 
sound.storeSfx('smallexplosion', '3,,0.1094,0.6292,0.3374,0.1949,,0.0785,,,,,,,,,,,1,,,,,0.5'); 
sound.storeSfx('powerup', '1,,0.0202,,0.4455,0.4339,,0.2229,,,,,,,,0.5824,,,1,,,,,0.5');

To play a sound just call the playStoredSfx function providing the key of the sound to play.

sound.playStoredSfx('powerup');
sound.playStoredSfx('smallexplosion');

Now on that weird looking string. That string contains all parameters needed by the synthesizer to play sounds. Luckily for us you don’t have to guess these numbers, just use the actionscript synthesizer. Go to this URL: http://www.superflashbros.net/as3sfxr/  and just play with it to create your sound. When you have reached the point where you have a sound that you can use, just hit CTRL+C. This copies the sound to the clipboard in string format, precisely the way as the parameter string for the sound effect.

image

Just have fun with it and use it in your Windows Store apps.

You can download my module, including SfxrSynth.js and SfxrParam.js here.

One last thing. It turns out John Vinnik ported the synthesizer to Windows Phone too. You can’t copy the sounds to the clipboard of your pc with that, but it is fun to play with :)

http://www.windowsphone.com/en-us/store/app/sfxr-lite/b1792f23-fd56-e011-854c-00237de2db9e

2 comments

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: