LFOs

Vibrato

Let's create a vibrato effect, which is a periodic wobble in pitch. We start with an oscillator that's producing a constant pitch. To add vibrato, we need a secondary oscillator, called a "modulator", which changes the pitch of the first oscillator. Since this second oscillator tends to run at a low frequency—usually below the threshold of hearing at 20 Hz or fewer—you'll sometimes hear the modulator referred to as a "low frequency oscillator".

const audioCtx = new AudioContext();

const oscillator = audioCtx.createOscillator();
oscillator.frequency.value = 220;
oscillator.type = "sawtooth";
const oscillatorGain = audioCtx.createGain();
oscillatorGain.gain.value = 0.1;
oscillator.connect(oscillatorGain);
oscillatorGain.connect(audioCtx.destination);

const modulator = audioCtx.createOscillator();
modulator.frequency.value = 1;
const modulatorGain = audioCtx.createGain();
modulatorGain.gain.value = 100;
modulator.connect(modulatorGain);
modulatorGain.connect(oscillator.frequency); // try switching to oscillator.detune

oscillator.start();
modulator.start();

Create a modulator just like you would any other oscillator. The frequency should be small enough that you can hear the vibrato effect; this example uses a modulator frequency of just 1 Hz. Then, you can hook up the modulator to a GainNode. The value of the GainNode's .gain determines how wide the wobble is; this example features a very exaggerated vibrato of 100 Hz.

Next, we connect the modulator node to its gain, then its gain node to the oscillator's frequency. Lastly, we start the modulator. Let's hear what this example sounds like!

Since there are two ways to adjust the pitch of an oscillator—frequency and detune—there are therefore two ways the modulator can create vibrato: one by hooking up the modulator to the .frequency property, and one by hooking up the modulator the .detune property. Let's see what happens if we hook up our modulator to .detune instead of frequency.

You'll hear that the wobble is much smaller. The reason is that while ferquency is measured in Hz, .detune is measured in cents. Since cents are almost always smaller than Hz, the second wobble is therefore smaller than the first.

Tremolo

Another effect is "tremolo", which is a periodic wobble in volume. To create a tremolo, we need to have our modulator alter the amplitude of the oscillator. We can access the amplitude of the oscillator via the oscillator GainNode's .gain property. Make sure also to lower the modulator's gain to 1—otherwise the volume will be incredibly loud!

const audioCtx = new AudioContext();

const oscillator = audioCtx.createOscillator();
oscillator.frequency.value = 220;
oscillator.type = "sawtooth";
const oscillatorGain = audioCtx.createGain();
oscillatorGain.gain.value = 0.1;
oscillator.connect(oscillatorGain);
oscillatorGain.connect(audioCtx.destination);

const modulator = audioCtx.createOscillator();
modulator.frequency.value = 1;
const modulatorGain = audioCtx.createGain();
modulatorGain.gain.value = 1;
modulator.connect(modulatorGain);
modulatorGain.connect(oscillatorGain.gain);

oscillator.start();
modulator.start();

You'll notice the sound ducking in and out; however, it's doing so twice a second, not once a second. Why is that? The reason is that the oscillator's gain reaches maximum volume when the modulator wave is at either 1 or -1; the oscillator is silent whenever the modulator wave is at 0. Since there are two 0-crossings in one period of a sine wave, we are actually getting two amplitude pulses per second, not one.