HomeAI & Machine LearningMFCC Feature Extraction Pipeline (2D)

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.

AI & Machine Learning2DAdvanced60 FPS📱 Mobile-adapted⇄ 3D version
2d-speech-recognition ↗ Open standalone

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.

⚙ Under the hood

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.

speech recognitionMFCCsignal processingformant synthesisIIR filteracoustic features

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)