Article | Posted on January 2013
Web Audio Input and Windows
Reading time: 5 minutes
Topics: JavaScript, Web Audio API, Windows
This is a legacy post, ported from the old system:
Images might be too
low quality, code might be outdated, and some links might not work.
Shake a Flake | Reactive Snow is last year's Holidays/New Year experiment: a cloud of falling snowflakes that react to sound.
If you want to perform some cool effects reacting to the sound created by the user, it's as easy as calling WebRTC's getUserMedia, connect it to a Web Audio analyser node and you are good to go. That is, unfortunately, unless you are running Windows and/or some specific sound configurations.
The problem (and its solution)
The problem is that in some cases, this simple code won't work as expected.
Basic page
JavaScript - index.html
function audioInputSuccess() {
console.log( 'success!' );
}
function audioInputError() {
console.log( 'error' );
}
navigator.webkitGetUserMedia(
{ audio: true },
audioInputSuccess,
audioInputError
);Even if you have all properly configured in Chrome, and allow the browser to access the microphone, the error handler will still be triggered, or simply there won't be any sound getting to the processing node in your audio chain.
I could experience the problem first hand, with three different Windows boxes, and I had seen Graphics Noob also having issues with Paul Lewis's Audio Room experiment. So it wasn't my code's fault, but knowing that is pretty pointless to actually get it working :)
The solution, according to the tubes and Chris Wilson, is to have the same sample rate in both your input and output devices. But what does that mean? Is that something that have to be correctly set up when initializing the audio context? Is something that has to be read from the input stream and then set up accordingly in the audio context, or is it the other way around?
Well, it turns out is none of the above. It might be obvious to everyone else, but I didn't have a clue. It's configured at OS level.
The solution, step by step
First, make sure that Chrome is updated. Web Audio Input should work from version 24 and up.
Then, make sure that Web Audio Input is enabled. Go to chrome://flags and look for the option "Web Audio Input". If it says "Enable", click it and relaunch Chrome.
If it still doesn't work, you'll have to go to Start Menu and Run "mmsys.cpl".
You should see a tab of Input devices, and a tab of Output devices.
First select the Playback device, and double-click or right-click and select Properties. Your playblack device will vary according to your setup. It might be your headphones, integrated loudspeakers, or a 5.1 surround system.
In the properties dialog, go to the Advanced tab and look at the value in the Default Format dropdown. That value is the precision in bits, and the sample rate in hertz (Hz).
Now go back and do the same for the Recording device. Again, you recording device might be different: the mic in the headset, the integrated mic, etc.
Make sure that the Sample Rate specified in the Default Formt dropdown matches the one in the Playback device. If they don't match, change one of them. A good, standard sample rate is 44100Hz, but you can go up as far as there are available presets.
There might be a warning about some applications using the device (Chrome might be one of them, if you are still running some of the examples). Disregard the warning and go ahead.
Done
That's it. Once you restart Chrome and try again, hopefully you should be able to have your code accessing the microphone audio input with no problems. Good luck!