Home▸AI & Machine Learning▸Speech Recognition & Synthesis Pipeline Simulator

🎙️ Speech Recognition & Synthesis Pipeline Simulator

Watch raw audio turn into a mel spectrogram, flow through transformer encoder layers, and come out as decoded text (ASR, Whisper-style) or resynthesized speech (TTS, ElevenLabs/Bark-style) — live in your browser.

AI & Machine Learning3DModerate60 FPS

Details

CategoryAI & Machine Learning

RenderingThree.js · WebGL

DifficultyModerate

Target FPS60

ControlsMode buttons (ASR speech-to-text / TTS text-to-speech) switch the pipeline direction and output visualization; pitch slider (80-300 Hz) sets the fundamental frequency of the synthetic voice and shifts spectrogram formants; speech-rate slider (0.5-2x) scales pipeline and token/frame speed; background-noise slider (0-100%) injects noise into the waveform and spectrogram and lowers recognition confidence.

Three.jsspeech synthesisspeech recognitionWhispertransformerspectrogramAI

Related simulations

Neural Network Architectures: From Perceptrons to TransformersSwitch between Perceptron, MLP, CNN and Transformer architectures and watch a forward pass…

Transformer Self-Attention ExplorerWatch self-attention weights emerge between tokens across stacked encoder layers and heads:…

AI Code Generation: Transformer Attention & Token Prediction VisualizerWatch a simplified transformer generate code token by token: multi-head self-attention lines… ⊞ All 880 in AI & Machine Learning →

⚙ Under the hood

Watch raw audio become a mel spectrogram, flow through transformer encoder layers, and decode into text (ASR, Whisper-style) or resynthesize into speech (TTS, ElevenLabs/Bark-style). Adjust pitch, speech rate and noise and watch confidence and real-time factor change live.

Three.jsspeech synthesisspeech recognitionWhispertransformerspectrogramAI

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install