A wiggling line in time hides a simple secret: it is built by adding up pure sine waves, each with its own frequency and loudness. The Fourier transform is the machine that reads that recipe back off the signal. The four tabs below share one signal you build (or draw) once, then view through four lenses — its live spectrum, the effect of a window, a scrolling spectrogram, and what a filter does to it. Every FFT is computed for real, in the browser, on the actual samples.
A signal is a list of numbers sampled in time — here, 1024 amplitude readings taken at 1000 samples per second. Fourier's claim is that any such list can be written as a sum of pure cosines and sines of different frequencies. The Discrete Fourier Transform (DFT) computes exactly how much of each frequency is present.
For each candidate frequency, the DFT multiplies the signal by a sine and a cosine at that frequency and adds up the result. If the signal contains that frequency, the products line up and the sum is large; if it doesn't, positives and negatives cancel and the sum is near zero. The magnitude of that complex sum is the height of the spike you see.
The frequencies it tests are not arbitrary. With N samples at rate Fs, the DFT reports N/2 usable frequencies spaced Δf = Fs/N apart — the bins. Finer frequency resolution needs a longer recording.
The FFT (Fast Fourier Transform) is not a different answer — it is the same DFT computed cleverly. A naive DFT costs about N² multiplications; the FFT factors the problem recursively into N·log₂N, which for N = 1024 is roughly a 100× speed-up. That single algorithm is why real-time spectra, MP3s, JPEGs, Wi-Fi and MRI reconstruction are practical.
The Nyquist–Shannon limit says a sample rate Fs can only represent frequencies below Fs/2. Try to encode something faster and it aliases — it masquerades as a lower frequency, indistinguishable after sampling. That is why the sliders here stop at 500 Hz.
Everything you see is symmetric: the same information sits in the waveform and in the spectrum, so the transform is invertible. Tab 4 uses that inverse to rebuild a wave after editing its spectrum.
The DFT does not analyse your signal in isolation — it implicitly treats the N samples as one period of a periodic signal, repeated forever. If a sinusoid completes a whole number of cycles inside the window, the wrap-around is seamless and its energy lands in exactly one bin. If it completes a fractional number of cycles, the loop point has a discontinuity, and a discontinuity contains energy at all frequencies. That smear is spectral leakage.
A window function w[n] multiplies the signal so it fades smoothly to zero at both ends. Now the periodic extension has no jump, so the leakage collapses. The cost is that multiplying in time is convolving in frequency: every true spike is replaced by a blurred copy of the window's own spectrum, the main lobe, flanked by side lobes.
Windows differ in how they split the difference. The rectangular window (no taper) has the narrowest main lobe — best frequency resolution — but side lobes only ~13 dB down, so nearby weak tones drown. Hann and Hamming widen the main lobe roughly 2× but push side lobes to ~-31 dB and ~-43 dB. Blackman goes further still (~-58 dB) at the cost of an even wider lobe.
The rule of thumb: choose a window by what you need to see. To separate two tones of similar strength that are close in frequency, favour a narrow main lobe (rectangular or Hann). To find a faint tone next to a loud one, favour low side lobes (Blackman). This resolution-versus-dynamic-range trade is the whole art of windowing.
A plain FFT gives one spectrum for the whole recording — it tells you which frequencies are present but not when. For a sound that changes, like speech or a siren, that is not enough. The fix is the Short-Time Fourier Transform (STFT): chop the signal into short, overlapping frames, window each one, and FFT them separately. Each frame becomes one vertical column of the spectrogram.
Stack the columns left to right and you get a time–frequency image: horizontal axis time, vertical axis frequency, and brightness (or colour) the magnitude in that frame and bin — usually shown in decibels so quiet detail survives. A steady tone draws a horizontal line; a sweep draws a slope; a click draws a vertical streak.
The STFT forces a choice. A long frame gives fine frequency resolution but blurs time — you can't say exactly when a note started. A short frame localises events in time but smears them in frequency. This is the same time–frequency uncertainty that limits every joint measurement; you cannot be perfectly sharp in both at once.
Spectrograms are everywhere: they reveal the formant bands that distinguish vowels, let ornithologists identify birds by the shape of their song, drive Shazam-style audio fingerprinting, and — as a mel-spectrogram — are the standard input that speech-recognition and music neural networks actually "see." Your microphone here runs the browser's built-in analyser doing exactly this, in real time.
A filter selectively passes or rejects frequency components. In the time domain that operation is convolution — a smearing of the signal against the filter's impulse response — which is fiddly. The convolution theorem says that the same operation is plain multiplication in the frequency domain. So the easy recipe is: FFT the signal, multiply the spectrum by the filter's response curve, and inverse-FFT back to time. That is exactly the pipeline running here.
The four archetypes are just different masks: a low-pass keeps frequencies below a cutoff, a high-pass keeps those above, a band-pass keeps a middle band, and a notch deletes one narrow band while keeping the rest. Cascade them and you can carve any shape you like.
Real filters are never perfect bricks. The roll-off sharpness here sets how steeply the response falls at the edge. A brick-wall filter (infinitely sharp) is ideal in frequency but rings badly in time — its impulse response is an endless sinc that smears clicks into long wobbles. A gentle slope rings less but blurs the frequency boundary. This sharpness-versus-ringing tension is the same time–frequency trade seen throughout these tabs.
Because we edit the whole spectrum at once and transform back, this is a zero-phase, frequency-domain filter — clean for teaching. Streaming systems instead use recursive IIR or tapped FIR filters that work sample-by-sample, but the intent is identical: shape the spectrum. Filtering underlies equalisers, noise reduction, radio tuning, anti-alias front-ends, and the sharpen/blur of image editing.