Apply High-Pass and Low-Pass Filters in Tone.js

In web audio development, shaping the frequency spectrum of your sound is essential for creating polished audio experiences. This article provides a straightforward guide on how to implement high-pass and low-pass filters using the Tone.Filter class in Tone.js. You will learn how to initialize a filter, configure its properties, and connect it to audio sources to dynamically manipulate your sound.

Understanding Tone.Filter

The Tone.Filter node is a versatile tool that allows you to attenuate specific frequencies of an audio signal.

• Low-pass filter (lowpass): Passes frequencies below the cutoff frequency and attenuates frequencies above it. This is commonly used to make sounds warmer, darker, or muffled.
• High-pass filter (highpass): Passes frequencies above the cutoff frequency and attenuates frequencies below it. This is useful for removing low-end rumble or creating thin, bright sounds.

Other available parameters include frequency (the cutoff point in Hertz), Q (the resonance or peak at the cutoff frequency), and rolloff (the steepness of the attenuation curve, such as -12, -24, -48, or -96 dB/octave).

Implementing a Low-Pass Filter

To apply a low-pass filter, instantiate a new Tone.Filter with the type set to "lowpass".

// Create a low-pass filter that cuts off frequencies above 800 Hz
const lowPassFilter = new Tone.Filter({
  type: "lowpass",
  frequency: 800,
  Q: 1,
  rolloff: -12
}).toDestination();

// Connect a synthesizer to the filter
const synth = new Tone.Synth().connect(lowPassFilter);

// Play a note to hear the filtered sound
synth.triggerAttackRelease("C4", "8n");

Implementing a High-Pass Filter

To apply a high-pass filter, change the type property to "highpass". This setup is ideal for clearing out low frequencies from instruments like leads or pads.

// Create a high-pass filter that cuts off frequencies below 1500 Hz
const highPassFilter = new Tone.Filter({
  type: "highpass",
  frequency: 1500,
  Q: 1,
  rolloff: -24
}).toDestination();

// Connect a white noise generator to the high-pass filter
const noise = new Tone.Noise("white").connect(highPassFilter);

// Start the noise generator
noise.start();

Modulating the Filter Dynamically

You can change the cutoff frequency of your filter in real-time. Because the frequency property is an instance of Tone.Signal, you can schedule changes or smoothly transition between values.

Instant Change

// Change the cutoff frequency instantly to 1200 Hz
filter.frequency.value = 1200;

Smooth Transition (Ramping)

// Smoothly ramp the frequency to 200 Hz over the course of 2 seconds
filter.frequency.rampTo(200, 2);

By connecting instruments to configured Tone.Filter nodes and adjusting their frequencies over time, you can easily implement classic synthesizer sweeps, transition effects, and essential audio mixing techniques in your web applications.