Real-time frequency analysis · Web Audio API · Logarithmic scale · Peak hold
A real-time frequency spectrum analyzer powered by the Web Audio API's
AnalyserNode. Choose from six built-in audio sources — sine waves, white and
pink noise, sawtooth, square waves, and a musical chord — and watch their spectral fingerprints
appear instantly on a logarithmic frequency axis with dB amplitude scale. Peak-hold markers
and an oscilloscope waveform strip give you a complete time–frequency picture.
The FFT (Fast Fourier Transform) decomposes any time-domain signal into its frequency
components. For a signal sampled at rate fs with N samples,
the FFT produces N/2 frequency bins each spanning fs/N Hz.
The Web Audio API's AnalyserNode computes a windowed FFT using a Blackman
window to reduce spectral leakage. Doubling FFT size halves frequency resolution but also
halves time resolution — a fundamental time-frequency trade-off.
Select an audio source from the buttons above. The spectrum shows frequency (20 Hz–20 kHz, log scale) vs amplitude (dB). For sine waves, drag the frequency slider to see the single peak move. Switch to sawtooth to see the fundamental plus odd and even harmonics. Pink noise shows 1/f energy rolloff (~3 dB/octave). Increase FFT size for finer frequency resolution at the cost of slower updates. Toggle Peak Hold to track maximum levels.
The Fast Fourier Transform (1965, Cooley & Tukey) reduced DFT computation from O(N²) to O(N log N) — a 1024-sample FFT is ~100× faster than naïve DFT. Modern audio equalizers, speech recognition, and music fingerprinting (Shazam) are all built on FFT analysis. The human ear has roughly logarithmic frequency perception, which is why spectrum analyzers use log frequency axes.
This simulation turns any of six audio sources into a live frequency spectrum using the Web Audio API's AnalyserNode. The Fast Fourier Transform decomposes the time-domain waveform into frequency components: for a sample rate fs and FFT size N, it returns N/2 bins each spanning fs/N Hz. Magnitudes are mapped to a logarithmic frequency axis (20 Hz to 20 kHz) against a decibel amplitude scale from -80 to 0 dB.
The controls let you pick a source (sine, white noise, pink noise, sawtooth, square or a chord), sweep the sine frequency from 20 Hz to 8 kHz, choose an FFT size of 512 to 4096 samples, and adjust spectral smoothing from 0 to 0.95. Peak Hold marks running maxima while an oscilloscope strip shows the raw waveform. Spectrum analysis underpins audio equalisers, speech recognition and music fingerprinting tools such as Shazam.
What is an FFT spectrum analyzer?
It is a tool that shows how much energy a signal contains at each frequency. The Fast Fourier Transform converts a time-domain waveform into a set of frequency bins, and the analyzer plots their amplitudes. Here the result is drawn live as coloured bars across a logarithmic frequency axis.
How does this simulation generate sound?
It uses the Web Audio API. Sine, sawtooth and square tones come from an OscillatorNode, the chord layers three sine oscillators at A4, C5 and E5, and the noise sources are filled by a ScriptProcessorNode. All sources feed a gain node connected to an AnalyserNode, which performs the FFT each frame.
What do the controls actually do?
The source buttons choose which signal is analysed. The frequency slider (20 Hz to 8 kHz) sets the pitch of the sine, sawtooth and square tones. The FFT Size selector changes the analysis resolution, and the Smoothing slider averages successive frames. Pause freezes drawing and Peak Hold tracks the highest level reached in each bin.
FFT size sets the number of samples analysed per frame: 512, 1024, 2048 or 4096. A larger size produces more frequency bins and finer resolution (each bin spans fs/N Hz), but covers a longer time window, so the display reacts more slowly. The Stats panel reports the current Hz-per-bin figure.
The discrete Fourier transform is X[k] = sum over n of x[n] times e^(-i 2 pi k n / N). The FFT is a fast algorithm that computes the same result in O(N log N) operations instead of O(N squared). Bin k corresponds to frequency k times fs divided by N.
Human pitch perception is roughly logarithmic, so each octave doubles in frequency. A log axis gives equal screen space to each octave, matching how we hear and making low, mid and high content easy to compare. That is why the grid lines fall at 20, 50, 100, 200, 500 Hz and so on.
It sets the AnalyserNode's smoothingTimeConstant, a value from 0 to 0.95 that blends the current spectrum with the previous one. Low values give a fast, jittery response that reveals transients; high values produce a steadier, averaged display that is easier to read but slower to react.
A pure sine wave contains energy at a single frequency, so it shows one peak. A sawtooth is rich in harmonics, with components at every integer multiple of the fundamental, so it appears as a series of peaks decreasing in amplitude. A square wave similarly shows odd harmonics.
Each frame the code scans every bin, finds the one with the largest magnitude, and converts it back to hertz using bin times fs divided by FFT size. That value is shown as Dominant freq. The accuracy is limited by the bin width, so larger FFT sizes give a more precise reading.
Yes, within the limits of a browser demo. The AnalyserNode performs a genuine windowed FFT and reports real magnitudes in decibels. Bin spacing, harmonic structure and the pink-noise rolloff all behave correctly. Exact peak amplitudes depend on the internal window function and the chosen smoothing, so treat readings as indicative rather than calibrated measurements.
They are central to audio engineering, where they guide equalisation and mixing, and to telecommunications for examining radio signals. The same FFT analysis powers speech recognition, sonar and vibration monitoring, and music identification services such as Shazam, which match recordings against a database of spectral fingerprints.