In yesterday’s post I covered the bare bones basics of creating audio with the Web Audio API. In this post, I’ll demonstrate one way to start creating some interactivity.
One of the simplest and most dynamic ways to capture interactivity on a computer is by simply reading the mouse position. The strategy for this next experiment is to use the mouse’s y-position to control the frequency of a single oscillator. The code for this is super simple:
[php lang=”javascript”]
window.onload = function() {
var context = new window.webkitAudioContext(),
osc = context.createOscillator(),
h = window.innerHeight;
osc.connect(context.destination);
osc.start(0);
document.addEventListener(“mousemove”, function(e) {
osc.frequency.value = e.clientY / h * 1000 + 300;
});
};
[/php]
Create an AudioContext and an oscillator, get the window dimensions, connect and start the oscillator and listen for mousemove events.
In the mousemove handler, e.clientY / h will be a number from 0 to 1. Multiply this by 1000 and add 300 and you’ll have a frequency from 300 to 1300. This gets assigned to the oscillator’s frequency value. Move your mouse around the screen and get different pitches. Simple.
Remember, the above has only been tested in the latest version of Chrome at the time of this writing. Other configurations may work; some may require some changes.
Now what about they x-axis? Yesterday you had two oscillators going. Let’s try to hook the mouse’s x-position to that second oscillator.
[php lang=”javascript”]
window.onload = function() {
var context = new window.webkitAudioContext(),
osc = context.createOscillator(),
osc2 = context.createOscillator(),
gain = context.createGain(),
w = window.innerWidth,
h = window.innerHeight;
osc.frequency = 400;
osc.connect(context.destination);
osc.start(0);
gain.gain.value = 100;
gain.connect(osc.frequency);
osc2.frequency.value = 5;
osc2.connect(gain);
osc2.start(0);
document.addEventListener(“mousemove”, function(e) {
osc.frequency.value = e.clientY / h * 1000 + 200;
osc2.frequency.value = e.clientX / w * 30 + 5;
});
};
[/php]
This is much the same as the final code from yesterday, but now you’re using the mouse x- and y-positions to control the frequencies of both oscillators. Move your mouse all over the screen now and you’ll get all kinds of science-fictiony sounds. I picture a 1950’s flying saucer taking off, or maybe an alien ray gun. Mess with the frequency ranges of both oscillators and try changing the oscillator types for both – mix and match square, sawtooth and triangle waves for all kinds of interesting results.