Audio Recorder
Record audio from your microphone with live waveform visualization.
Audio Recorder captures microphone audio into WebM blobs while drawing a live frequency waveform on canvas. Click "Record", allow mic access, and the page starts MediaRecorder with mimeType 'audio/webm' and a 100ms timeslice while an AnalyserNode (fftSize 256) feeds getByteFrequencyData each animation frame — you watch hue-gradient bars pulse as you speak, alongside an m:ss timer. "Stop" resolves a Recording object (crypto.randomUUID id, blob, object URL, duration, size, timestamp) and toast "Recording saved!".
Recordings accumulate under "Recordings ({n})" with duration and byte size, play/pause controls (plain HTMLAudioElement on the object URL), per-item trash, and download as recording-{id.slice(0,8)}.webm. "Clear All" empties the list. Blobs stay in memory — nothing is uploaded — and denied microphone access surfaces toast "Microphone access denied".
How it works
startRecording in lib/audioRecorder.ts runs getUserMedia({ audio: true }), constructs new MediaRecorder(stream, { mimeType: 'audio/webm' }), and calls start(100) so data chunks arrive every 100ms. In parallel it builds an AudioContext → createMediaStreamSource → AnalyserNode (fftSize 256); the page's animation loop reads getByteFrequencyData and paints frequency bars to canvas with a hue gradient.
A 1s interval dispatches durationTicked only while isRecording is true, driving the m:ss formatDuration readout. stopRecording stops all tracks, assembles the Recording { id: crypto.randomUUID(), blob, url: objectURL, duration, size, timestamp }, and lands it in audioRecorderSlice. Playback uses new Audio(rec.url); download writes recording-{first-8-chars}.webm. No network — MediaRecorder and Web Audio run locally.
How to use
- Step "Record" — click "Record" and allow microphone access (denied → toast "Microphone access denied").
- Watch the live waveform canvas (bars from AnalyserNode) and the m:ss timer; idle canvas says "Click record to start".
- Click "Stop" → toast "Recording saved!"; step advances to "Review".
- Find the item under "Recordings (n)" with duration + size (formatBytes).
- Play/pause via the ghost icon buttons (HTMLAudioElement on the object URL).
- Download → recording-{first-8-chars of id}.webm.
- Trash a single recording or "Clear All" to empty the list.
Tips
- Format is always WebM (MediaRecorder mimeType 'audio/webm') — it matches the .webm download name; convert later with audio-converter if you need MP3/WAV.
- The waveform is frequency-domain (fftSize 256 via getByteFrequencyData), not raw amplitude — it emphasizes pitch content.
- Data chunks accumulate every 100ms (mediaRecorder.start(100)), so even short captures survive a mid-recording crash of the UI state.
- The timer only ticks while isRecording is true — no timer appears before you start.
Audio Recorder FAQ
What format is recorded?
WebM — MediaRecorder constructed with mimeType: 'audio/webm' in startRecording.
Is audio uploaded?
No — blobs stay in memory via URL.createObjectURL; there are no network calls in the recording pipeline.
How does the waveform work?
Web Audio AnalyserNode.getByteFrequencyData drawn to canvas each animation frame, with fftSize 256.
Why no timer before recording?
Duration ticks via setInterval dispatching durationTicked only while isRecording is true.
What happens if I deny the microphone?
Toast "Microphone access denied" appears and the recording effect stops without creating a Recording.
Credits
- MediaRecorder & Web Audio API — Recording + AnalyserNode waveform in lib/audioRecorder.ts