Voice Notes Firefox 擴充功能在本機完成錄音、播放及轉錄

I've been thinking about this for a while: almost every browser-based audio recording tool eventually phones home. You hit record, your voice travels to some server, gets processed there, and comes back. Sometimes that's fine. But if you're recording meeting notes, voice memos, personal thoughts — that's your data leaving your machine before you've decided anything about it.

So I built Voice Notes — a Firefox extension where recording, playback, export, and even transcription happen entirely inside the browser. Zero server calls. The audio never leaves your machine unless you explicitly export it.

The Problem with "In-Browser" Tools

The term "browser-based" is doing a lot of heavy lifting in a lot of products. It often just means the UI runs in the browser — the actual processing happens on a backend. There are legitimate reasons for this: servers have more compute, server-side storage is easier to sync across devices, and server-side transcription models are more accurate.

But those tradeoffs assume you want your data there. For voice memos, I don't. I want something closer to a memo pad — fast, local, private.

The Insight: WebAudio + IndexedDB Is Actually Enough

Modern browsers ship MediaRecorder, AudioContext, and IndexedDB. Together, those three APIs are enough to build a real recorder:

• MediaRecorder handles mic input and encodes audio (WebM/Opus in Firefox, which has excellent quality at low bitrates)
• AudioContext gives you waveform visualization and playback control
• IndexedDB stores blobs — full audio recordings — persistently, without size limits that would break localStorage

The recordings live in the extension's isolated IndexedDB. They stay there until you delete them or export them yourself. No OAuth, no account, no upload endpoint.

What It Actually Does

Voice Notes gives you a clean interface inside a Firefox sidebar:

• Record from any mic the browser can see — USB, built-in, headset
• Play back with a waveform scrubber
• Export as .webm (default) — the native container, lossless from the MediaRecorder output
• Transcribe — this is the interesting one. Transcription runs via the Web Speech API, which Firefox exposes locally. No API key, no cloud endpoint. It's not as accurate as Whisper, but it's private and instant.

The whole extension is plain JavaScript. No bundler, no framework dependency, no build step. Open the source and you can read it.

Why Firefox Specifically

I could have built this for Chrome. But Firefox made it easier to build the right thing.

First, the privacy culture of the Firefox user base means people actually care about local-first software. When I posted on Hacker News today, the first comments were about the architecture — how storage works, whether it's truly offline. Chrome extension users rarely lead with that question.

Second, Firefox's WebExtensions implementation has a cleaner sidebar API. The extension lives in a persistent panel that doesn't close between page navigations. That matters for a recorder — you don't want the recording to stop because you clicked a link.

Third, no Chrome dependency. I don't have to maintain a Chrome Web Store listing, accept their review timeline, or worry about Manifest V3 deprecating APIs I depend on. Firefox's WebExtensions support has been stable and the policy around it is clearer.

What I Learned Building It

The trickiest part wasn't recording — it was state management across IndexedDB and the UI. IndexedDB is asynchronous and transaction-scoped. If a recording is in progress and the user closes the panel, you need to either commit the partial blob or discard it cleanly. I ended up writing a small state machine: idle → recording → stopping → saved. Each transition either commits or rolls back the IndexedDB write.

Waveform rendering with AudioContext was also more work than expected. The visualizer needs to poll the AnalyserNode at ~60fps, but only while recording. I used requestAnimationFrame with an explicit cancel handle tied to the recording state — simple, but easy to get wrong and cause CPU leaks if the handle isn't cleaned up.

Try It

The extension is on AMO: Voice Notes Audio Recorder

It's MIT licensed. If you want to see how the IndexedDB layer or the transcription flow works, the source is in the repo.

If you're on Hacker News, I'm in the Show HN thread today — happy to answer questions about the architecture or the Firefox-specific choices.

Building local-first tools in the browser is genuinely underexplored. The APIs are there. The storage is there. I think we're leaving a lot of user trust on the table by defaulting everything to a server.