Sound Lab
Record your voice, then read it two ways at once: a time-domain waveform (how loud, moment to moment) and a spectrogram (which frequencies are present over time). Then run a digital filter over your clip and watch energy vanish from the picture — the most intuitive way to learn what low-pass, high-pass, band-pass and notch filters actually do. Switch the lower plot to a mel spectrogram or to MFCCs to see the same clip the way a speech recogniser does.
Filter the recording
A filter keeps some frequencies and rejects others. Pick a type, drag the cutoff, and the waveform & spectrogram above update to show the filtered sound. Hit play to hear it. The cutoff line is drawn on the spectrogram.
Filter frequency response — how much each frequency is kept (0 dB) or cut.
What am I looking at?
Waveform (time domain)
The top trace is air pressure vs. time — exactly what the microphone diaphragm felt. Tall = loud, flat = silence. It tells you when things happened but not what pitch they were.
Spectrogram (time–frequency)
The bottom image is a stack of FFTs: the audio is chopped into short overlapping windows, each turned into a spectrum, and the spectra are laid side by side. Vertical axis is frequency (log scale, 20 Hz–20 kHz), brightness is energy. Vowels show up as horizontal stripes (the harmonics of your voice); "s" and "sh" sounds are bright fuzz up high.
FFT size = the trade-off
A bigger FFT size means finer frequency resolution but blurrier timing; a smaller one sharpens timing but smears frequency. This is the time–frequency uncertainty principle — you can't have both perfectly.
Mel scale (hearing-shaped frequency)
Set the lower plot to Mel and the frequency axis is warped by m = 2595 log10(1 + f/700) — roughly how a pair of ears spaces pitch. Instead of thousands of FFT bins the spectrum is summed into a few dozen overlapping triangular bands (the Mel Bands control), fine below 1 kHz where speech carries its vowels and coarse up high where we hear only "bright" or "dull". The picture looks like a blurred spectrogram, and that is the point: it throws away detail your ear never used.
MFCC (the shape of the spectrum)
Take the log of those mel band energies and run a DCT across them, and you get the mel-frequency cepstral coefficients. Each row of the MFCC plot is one coefficient: c1 is the overall tilt of the spectrum (dark vs. bright), c2 a broad hump vs. dip, and higher coefficients track ever finer ripples across frequency. Together the first dozen describe the envelope — the vocal-tract shape making the vowel — while discarding the pitch harmonics, which is exactly what a speech recogniser or speaker-ID model wants. Say "ah ah ah" then "ee ee ee" and watch the low coefficients switch between two patterns while the spectrogram's harmonic stripes stay busy.
Blue is a negative coefficient, red positive, white near zero. Each row is scaled to its own range, because c1 is several times larger than the rest and a single shared scale would leave the higher coefficients an almost blank smear. c0 is left out because it is just overall loudness — which is also why Clip Gain shifts the spectrogram's brightness but leaves the MFCC picture untouched. Filters, on the other hand, change the envelope, so the MFCCs redraw as you drag the cutoff.
Low-pass & high-pass
A low-pass filter keeps frequencies below the cutoff and removes the rest — the top of the spectrogram goes dark and speech sounds muffled. A high-pass does the opposite, thinning the low rumble and leaving the airy highs.
Band-pass & notch
Band-pass keeps only a band around the cutoff (telephone / walkie-talkie sound). Notch carves out one narrow band — the classic trick for killing 50/60 Hz mains hum without touching everything else.
Q, roll-off, FIR vs IIR
The filters here are IIR biquads (Web Audio BiquadFilterNode): cheap, feedback-based, like analog circuits. FIR filters instead sum a finite list of delayed, weighted samples (the "taps") — more taps means a steeper, cleaner cutoff but more compute and delay. Q sets how sharp the corner is and how much it rings right at the cutoff.