Technical Briefing
How Vocal Viz Works
Microphone FFT to neon spectrum bars
Vocal Viz uses the Web Audio API to analyze live microphone input. Frequency magnitudes are sampled and drawn as animated bars on a canvas.
Data Pathway
Audio Stream
FFT Analysis
Visualizer
1) Audio graph setup
The app requests microphone access, creates an AudioContext, and connects MediaStreamSource -> AnalyserNode.
Analyzer wiring
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
analyser.smoothingTimeConstant = 0.85;
const source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);2) Frequency data extraction
Every frame, frequency-bin magnitudes are read into a Uint8Array and transformed into bar heights.
Frequency sampling
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);3) Visual encoding
Each bar color and size is mapped from its sampled frequency intensity, producing a responsive synthwave-style display.
Mission Debrief
No ML model needed for visualization.
FFT-based spectrum is low-latency and intuitive.
Good template for audio-reactive interfaces.