Voice Recorder

How to use the Voice Recorder

1. Click Allow microphone & start recording. The browser prompts once for microphone permission; grant it and capture starts immediately.
2. Watch the live timer. A red dot pulses while recording is active. The level meter responds to input volume so you can confirm the right device is selected.
3. Speak. The audio streams into the encoder in 100 ms chunks, accumulating in tab memory. There is no automatic stop; you control the duration.
4. Press Stop & preview when you are done. The accumulated chunks are joined into a single Blob and loaded into the preview player so you can listen before saving.
5. Press Download recording to save the file. Output is WebM with Opus on Chromium and Firefox, or M4A with AAC on Safari, depending on what your browser supports natively.

What the recorder does under the hood

The implementation uses three Web APIs in sequence. navigator.mediaDevices.getUserMedia({ audio: true }) requests microphone access; the browser shows the permission prompt and resolves with a MediaStream containing one audio track. The stream is wrapped in a MediaRecorder instance, configured with the first MIME type the browser advertises support for via MediaRecorder.isTypeSupported(). On Chromium and Firefox that resolves to audio/webm;codecs=opus; Safari (which does not implement WebM recording) falls back to audio/mp4;codecs=mp4a.40.2, which is AAC LC inside MP4.

The recorder fires dataavailable events with encoded chunks at the configured timeslice. The handler pushes each chunk into an array. On Stop, the chunks are concatenated into a single Blob with the original MIME type, then exposed to the preview audio element via URL.createObjectURL. The download button writes the Blob to a hidden <a> with a download attribute. No fetch call is ever issued; you can verify by opening DevTools' Network tab and confirming the only requests are static asset fetches at page load.

When this tool earns its keep

• Quick voice memos on a laptop where installing a phone or desktop app is overkill.
• Recording a podcast guest segment for an interview when the guest only has a browser.
• Capturing voiceover takes for a video edit, then importing the WebM or M4A into Premiere, DaVinci Resolve, or Audacity.
• Testing a microphone before a Zoom, Google Meet, or Teams call to confirm the right device is selected and the levels are reasonable.
• Producing a one-off voice note to paste into a transcription tool like Whisper, Otter.ai, or Apple's Voice Memos transcription.
• Recording a verbal walkthrough of a Figma file or a code review without screen-recording the whole session.

Common pitfalls and edge cases

• Permission denial is sticky. Clicking Block on the browser prompt persists the decision; the recorder will keep failing until you reset the permission via the lock icon in the address bar. Chrome's setting lives at chrome://settings/content/microphone.
• Pause and resume are not implemented. The MediaRecorder API supports them, but the current build only exposes Start, Stop, and Download. Press Stop, save the segment, then start a new recording for the next segment.
• Memory caps the duration. Around 60 minutes of mono Opus is ~50 MB, which most browsers handle. Beyond 2-3 hours, tabs may slow or crash; record in chunks instead.
• iOS Safari requires foreground state. iOS 14.3 added MediaRecorder for audio, but only while the tab is foregrounded. Locking the screen or backgrounding the tab stops the recording silently. Plan accordingly for mobile sessions.
• Loopback (system audio) is not accessible. getUserMedia({ audio: true }) exposes only microphone input. To capture tab or system audio, use the Chrome screen-share API with audio sharing enabled, or a desktop tool like OBS or Audacity Loopback.
• Bluetooth headsets sometimes fail. AirPods and other devices use a different profile (HFP) for input than for output, which produces low-quality 8 kHz audio. Switch to the Mac built-in mic or a wired USB device for high-quality recording.

MediaRecorder, getUserMedia, and the formats they emit

MediaRecorder is part of the W3C MediaStream Recording specification, finalized as a Recommendation in 2017. It accepts a MediaStream from getUserMedia (microphone), getDisplayMedia (screen with optional system audio), or captureStream (canvas or video element) and emits encoded blobs at a configurable timeslice. The container and codec depend on browser support: Chromium ships an Opus encoder inside a WebM container; Firefox does the same; Safari encodes AAC LC inside an MP4 container because Apple does not implement WebM. Both formats decode in every modern browser, on every smartphone, and in every desktop editor (Audacity, Premiere, Resolve, Final Cut, Logic, Pro Tools). Opus, defined in RFC 6716, is the technically superior codec at every bitrate below 192 kbps and is the right choice when output size matters.

Alternatives and when they beat this tool

Audacity (free, cross-platform) is the right pick when you need real recording control: input device selection, multitrack capture, noise-reduction filters, normalization, and export to a wider format list. Apple Voice Memos and Android Recorder both come pre-installed and integrate with the OS file system, which beats the browser when you want to airdrop or share-sheet the file directly. iOS Voice Control and macOS Dictation transcribe in real time and do not produce an audio file at all; pick them when you want text. The on-page recorder wins when you need a quick capture from a desktop browser, do not want to install software, and do not want the recording to leave your machine for a remote service like vocaroo.com or rev.com.