AudioWaveform
Live-mic recording waveform and click-to-seek playback waveform in one component. Pairs with VoiceInputButton for capture and a transcript row for playback. Pure SVG-free DOM bars — works in any layout.
Source
src/components/ai/audio-waveform.tsxRecording — synthetic mic preview
No MediaStream is wired here, so the component drives a tasteful synthetic waveform. Pass an actual stream from getUserMedia and the bars sample real amplitudes via Web Audio.
Recording…
Playback with click-to-seek
Static waveform from precomputed levels; click anywhere to scrub. Optional duration label shows mm:ss above the timeline. Levels can come from your recorder, Whisper-derived sample peaks, or any audio analysis pass.
voice-message-042.wav
0:030:12
Inline message-style
Drop the playback waveform straight into a chat bubble for voice messages. No outer chrome — sits flat alongside the play button.
0:030:12