Building Voice Notes for Firefox: Web Audio API, No Cloud, No Account

#firefox #webextensions #webapi #productivity

Most note-taking apps for remote workers are overkill: accounts, sync, subscriptions, storage limits. For quick voice memos between meetings, I wanted something that worked without any of that.

What I Built

Voice Notes & Audio Recorder is a Firefox extension that lets you:

Record a voice note from your browser toolbar — one click to start, one to stop
Save notes locally (no cloud upload)
Play back and delete recordings directly in the extension popup
Export as a WAV file if you want to save it elsewhere

No account. No cloud. No subscription. Everything stays in your browser's local storage.

Who It's For

Remote workers who want to quickly capture a thought between back-to-back meetings without stopping to type. Students who want to record a reflection after a lecture. Anyone who thinks faster out loud than on a keyboard.

Technical Approach

The extension uses the Web Audio API and MediaRecorder:

// Request microphone permission
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);

const chunks = [];
mediaRecorder.ondataavailable = (e) => chunks.push(e.data);

mediaRecorder.onstop = async () => {
  const blob = new Blob(chunks, { type: 'audio/webm;codecs=opus' });
  const base64 = await blobToBase64(blob);

  const { recordings = [] } = await browser.storage.local.get('recordings');
  recordings.push({
    id: Date.now().toString(),
    data: base64,
    duration: /* calculated from timestamps */,
    created: Date.now()
  });
  await browser.storage.local.set({ recordings });
};

Storage Considerations

Audio recordings in base64 format are large. A 1-minute recording at Opus codec quality is roughly 200KB. Firefox's storage.local has a 10MB default limit.

For the extension, this means roughly 40-50 one-minute recordings maximum. That's fine for the use case (quick memos, not podcast storage). The UI shows a warning when you're approaching the limit.

Playback

For playback, the stored base64 is converted back to a Blob and played through an <audio> element in the popup:

function playRecording(base64Data) {
  const byteChars = atob(base64Data.split(',')[1]);
  const byteArray = new Uint8Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteArray[i] = byteChars.charCodeAt(i);
  }
  const blob = new Blob([byteArray], { type: 'audio/webm;codecs=opus' });
  const url = URL.createObjectURL(blob);

  const audio = new Audio(url);
  audio.play();
  audio.onended = () => URL.revokeObjectURL(url);
}

Permissions

The extension only requests microphone permission when the user first clicks record — not on install. Firefox's permission model shows the permission request in context, which helps users understand why it's needed.

{
  "permissions": ["storage"],
  "optional_permissions": ["microphone"]
}

What I'd Add

Voice-to-text transcription — The Web Speech API supports transcription. Adding an optional "transcribe this note" button would let users get text from their voice memos without a third-party service. The catch: Web Speech API quality varies significantly by browser and language.

Tags/search — Right now notes are just a list sorted by date. Tags or a search bar would help when you have 20 notes.

Try It

Free, no account: Voice Notes & Audio Recorder on Firefox AMO

Other extensions in the same productivity set: see the full list here.

DEV Community