This Winamp spectrum display can run from a synthetic demo signal or analyze live microphone input. The microphone mode uses the browser's Web Audio API locally: audio is neither recorded nor uploaded, and its media track stops as soon as the mode is disabled or the page is left.
From Samples to Frequencies
A microphone produces a sequence of time-domain samples. For a block of \\(N\\) samples \\(x_n\\), the discrete Fourier transform describes how strongly each complex sinusoid occurs:
\[ X_k=\sum_{n=0}^{N-1}x_n e^{-i2\pi kn/N}. \]The Fast Fourier Transform computes the same coefficients efficiently. With sample rate \\(f_s\\), bin \\(k\\) represents frequency
\[ f_k=\frac{k f_s}{N}. \]The analyzer uses 2048 samples per transform. At a common 48 kHz sample rate, adjacent bins are about 23.4 Hz apart. This is enough resolution to show the fundamental frequency and harmonics of speech without making the display react sluggishly.
Why the Bands Are Logarithmic
Speech energy is concentrated far below the upper end of the audible range. Dividing the FFT into equal-width frequency intervals would squeeze most useful movement into only a few bars. Instead, 18 bands span 80 Hz to 12 kHz on a logarithmic scale. The band index for frequency \\(f\\) is obtained from
\[ b=\left\lfloor 18\,\frac{\log(f/80)}{\log(12000/80)}\right\rfloor. \]Magnitudes within each band are combined as root-mean-square energy. A faster attack lets consonants and short transients appear immediately, while a slower release keeps the display readable between successive FFT frames. Peak markers fall more slowly than the bars, matching the behavior of classic audio visualizers.
Microphone Lifecycle
Permission is requested only after selecting Use microphone. Echo cancellation, noise suppression, and automatic gain control are disabled where the browser supports those constraints, allowing the visualizer to show a less processed spectrum. The analyzer is not connected to the audio output, so microphone sound is not played back through the speakers. Returning to the demo signal closes the audio context and stops every media track.
Microphone capture requires a secure context, normally HTTPS or localhost. If permission is unavailable or denied, the synthetic signal continues to animate the original Winamp display without requiring any device access.
References
- [W3C2021]W3C, Web Audio API, W3C Recommendation, 2021.