Filter Explorer

a JavaScript music demo

Press the button to play the waveform, and adjust the controls to alter its shape.

Play / Pause

What is this?

This is an audio generator tool to explore the timbral quality imparted by applying one of several filters to an incoming signal. The top box is an oscilloscope view which visualizes the waveform, and the bottom box is a harmonic spectrum view.

This tool generates white noise at an adjustable amplitude, and allows you to adjust the type and parameters of the filter, as well the overall output amplitude (volume). The filter parameters are:

• f₀ (center frequency) — f₀ is the frequency at which the filter is most active and at which the frequency response of the filter "pivots."
• Q (quality) — Q is a measure of how steep the dropoff is of the frequency response curve around f₀. A low Q means that the frequency curve ramps gently down, such that the filter encompasses a relatively wider portion of the spectrum. A high Q means that the frequency curve ramps steeply down, such that the filter encompasses a relatively narrower portion of the spectrum. Q must be a positive (non-zero) value.
• type — There are four basic types of filter. In each case, the filter performs a transformation from its input harmonic spectrum, with a "pivot" at f₀. The filter type indicates the general shape of the transformation:
  • low-pass — The filter passes (allows) frequencies lower than f₀ and rejects (squelches) frequencies above f₀.
  • high-pass — The filter passes frequencies higher than f₀ and rejects frequencies below f₀.
  • band-pass — The filter passes frequencies near f₀ and rejects frequencies away from f₀.
  • notch (band-reject) — The filter passes frequencies away from f₀ and rejects frequencies near f₀.

See the source.

Items of note

Because Q is not allowed to be zero, when you adjust its slider all the way down, you instead get a small but positive value.

There is no upper limit to Q, but this demo limits it to 500. This more or less covers the useful range for sound synthesis.

At higher Q the filter becomes significantly "resonant." That is, even if you cut off the input (by setting the amplitude to zero), you will still see output with energy at f₀. It will eventually decay.

It can be hard to tell what a notch filter is doing at higher Q, both audibly and in terms of the spectrum. When using a notch filter, you'll probably have better results with Q under 5.

It's easy to pick filter parameters which will "blow out" the output out of the valid-for-audio range of -1 to 1. The straightforward way to correct for this is simply to lower either the input or output amplitude. If you don't, the main thing you will notice is that you end up with extra peaks in the output harmonics, which correspond to the "shelves" caused by the cutoff of the waveform at either extreme of instantaneous amplitude.

The filters implemented in this demo are two-pole infinite impulse response (IIR) filter. The "infinite" in the name means that filter output at any given point in time depends on all of the input that the filter has ever received. This is in contrast to a finite impulse response (FIR) filter, which only depends on a limited rolling window of previous input to the filter. (In digital filters, this window is generally one sample per pole.)

The four basic types of filter demonstrated here aren't the only kinds of filter. There are many others. Roughly speaking, though, one can think of any filter as a combination of the types described here.