MFCC Feature Extraction Pipeline (2D)
Watch a synthetic voice signal — built from a real parallel formant-resonator filter bank, not additive harmonics — turn into mel-frequency cepstral coefficients in 2D: a scrolling mel-spectrogram heatmap, a live power-spectrum curve with the mel triangular filters overlaid, and the resulting MFCC bar chart.
Before any acoustic model — hidden Markov, deep neural network or transformer — can recognize a phoneme, the raw waveform has to be turned into features it can actually use. This 2D simulator runs that exact pipeline, but starts from a genuinely different voice synthesizer than the 3D version: a leaky-integrated glottal pulse train at the chosen pitch drives a parallel bank of three real second-order IIR resonators tuned to the vowel's formant frequencies — an actual recursive digital filter, not a frequency-domain approximation. That signal then passes through pre-emphasis, Hamming windowing, a direct DFT power spectrum, a continuous-interpolation mel-scaled triangular filterbank, log compression, and a discrete cosine transform, live, frame by frame. The scrolling heatmap is the resulting mel-spectrogram; the middle strip overlays the raw power spectrum with the mel filter shapes so you can see exactly what each filter integrates; the bottom bars are the resulting MFCC feature vector. Switch vowels, change pitch, and dial in background noise to see how each reshapes the features an ASR model would actually receive.
Watch a synthetic voice signal — built from a real parallel formant-resonator IIR filter bank, not additive harmonics — turn into mel-frequency cepstral coefficients in 2D: pre-emphasis, Hamming windowing, DFT power spectrum, a continuous-interpolation mel filterbank, log compression and DCT, shown as a scrolling spectrogram heatmap, a live power-spectrum-with-filters curve, and the resulting MFCC bar chart.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install