Voice Recording With a Live Waveform (WebAudio Tutorial)

To record voice with a live waveform, open Zro7 Voice Recorder, hit Record, allow mic access, and watch the waveform draw in real time on the canvas. Stop to download WAV (uncompressed) or WebM (Opus). The whole pipeline — mic capture, waveform, encoding, download — is client-side WebAudio + MediaRecorder.

The WebAudio pipeline

1. getUserMedia({ audio: true }) gets the mic stream.
2. Wrap it in an AudioContext via createMediaStreamSource(stream).
3. Feed that into an AnalyserNode (fftSize 2048, smoothingTimeConstant 0.6).
4. On each animation frame, call getByteTimeDomainData(dataArray) and draw to canvas.
5. In parallel, feed the same stream into a MediaRecorder to save the file.

Two waveform styles

• Time-domain (oscilloscope): connects samples with lines. Best for talking-head feedback.
• Frequency-domain (bars): getByteFrequencyData for spectrum. Useful for tuning and music.

WAV vs WebM/Opus

WAV is uncompressed 16-bit PCM — perfect for editing but ~10 MB/min. WebM/Opus at 32 kbps is voice-quality at ~250 KB/min. Zro7 exports both; pick WAV if you'll edit in a DAW, WebM if you'll upload to a podcast host.

Latency and buffer size

The default AudioContext latency is fine for a visualizer. If you build a monitor (headphones), pass latencyHint: 'interactive' and be careful with feedback if the speakers aren't muted.

Steps

1. Open Voice Recorder.
2. Grant mic permission.
3. Record — the waveform draws live.
4. Stop, preview, and download WAV or WebM.
5. Optional: normalize with Zro7 Normalize Audio.