CODEWITHSUNDEEP
javascriptweb-audio-api
Tyler Dougherty
Tyler Dougherty

Reputation: 87

Get Final Output Frequency of Chained Oscillators

I've set up a web page with a theremin and I'm trying to change the color of a web page element based on the frequency of the note being played. The way I'm generating sound right now looks like this:

osc1 = page.audioCX.createOscillator();
pos = getMousePos(page.canvas, ev);
osc1.frequency.value = pos.x;

gain = page.audioCX.createGain();
gain.gain.value = 60;

osc2 = page.audioCX.createOscillator();
osc2.frequency.value = 1;

osc2.connect(gain);
gain.connect(osc1.frequency);
osc1.connect(page.audioCX.destination);

What this does is oscillate the pitch of the sound created by osc1. I can change the color to the frequency of osc1 by using osc1.frequency.value, but this doesn't factor in the changes applied by the other parts.

How can I get the resultant frequency from those chained elements?

Upvotes: 2

Views: 96

Answers (1)

aldel
aldel

Reputation: 6748

You have to do the addition yourself (osc1.frequency.value + output of gain).

The best current (but see below) way to get access to the output of gain is probably to use a ScriptProcessorNode. You can just use the last sample from each buffer passed to the ScriptProcessorNode, and set the buffer size based on how frequently you want to update the color.

(Note on ScriptProcessorNode: There is a bug in Chrome and Safari that makes ScriptProcessorNode not work if it doesn't have at least one output channel. You'll probably have to create it with one input and one output, have it send all zeros to the output, and connect it to the destination, to get it to work.)

Near-future answer: You can also try using an AnalyserNode, but under the current spec, the time domain data can only be read from an AnalyserNode as bytes, which means the floating point samples are being converted to be in the range [0, 255] in some unspecified way (probably scaling the range [-1, 1] to [0, 255], so the values you need would be clipped). The latest draft spec includes a getFloatTimeDomainData method, which is probably your cleanest solution. It seems to have already been implemented in Chrome, but not Firefox, as far as I can tell.

Upvotes: 2

Related Questions