Online Voice Recorder

How to record audio in your browser

Everything on this page happens in one tab and takes three clicks of browser work. Select your microphone if you have more than one, press Record, and press the same button — now labelled Stop — when you are done. The clip appears immediately underneath with a player, its duration, its file size and a download link. There is no upload progress bar because there is no upload.

1. Check the input first. Plug in the headset or USB microphone you intend to use before you press Record, then pick it in the Microphone list. Switching devices mid-take is not possible, and a webcam microphone across the room will sound like it.
2. Press Record and allow access. Your browser shows a permission prompt the first time. Until you accept it, the page is not listening to anything.
3. Watch the waveform, not the ceiling. The canvas shows the incoming signal. If a loud passage flattens into a solid block, you are probably too close or the input gain is too high — move back a hand's width or lower the level in your system sound settings and take the take again.
4. Press Stop. The recorder finalises the file, the timer resets to 00:00 and the new clip is inserted at the top of the list with the status badge showing Saved.
5. Play it back, then download it. Reviewing before you leave the page is worth the ten seconds: closing the tab discards every recording, because they only ever existed in memory.

A few habits make browser recordings much easier to work with. Say a short test phrase and listen to it before a long take — ten seconds of checking beats re-recording a ten-minute interview. Record in the quietest room available and keep the microphone off hard surfaces; a desk reflection is more audible than most people expect. Finally, name the file as soon as you download it: a folder of recording-1.webm, recording-2.webm is unusable a week later.

Your recording never leaves your device

This tool is a static page. It has no upload endpoint, no analytics on your audio and no server-side storage: the file exists as a Blob inside your browser's memory, addressed by a blob: URL that only this tab can resolve. Deleting the clip revokes that URL, and closing the tab releases everything else.

That architecture has three honest consequences, and they are worth stating plainly rather than hiding behind a privacy badge.

• The browser still asks for permission, and it must. Microphone capture is privileged: the page cannot open the device until you approve it, and the browser keeps showing the recording indicator while a stream is live. Permission is granted per site, and you can revoke it at any time from the padlock icon in the address bar. This prompt is not the page tracking you — it is the sandbox working as designed.
• The page needs a secure context. navigator.mediaDevices is only exposed over HTTPS (or on localhost during development), so on a plain http:// address there is no getUserMedia to call at all. This page detects that and tells you, instead of offering a button that could never work.
• Local does not mean permanent. Memory is not storage. A refresh, a crash, a closed tab or a phone that sleeps all destroy unrecovered recordings. Download anything you care about in the same session in which you recorded it.

Understanding the waveform

The canvas is fed by the Web Audio API. A single AnalyserNode is inserted between the microphone stream and nothing else — it is a pass-through tap that copies a window of samples on every animation frame. The visualiser reads that window two ways: as time-domain samples for the filled waveform shape, and as frequency bins to colour the peaks. The result is a zero-latency picture of what the microphone is hearing right now.

Read it as a shape, not as a number. Three things are visible at a glance:

• A flat line means near silence: the microphone is muted, the wrong input is selected, or you are too far from it.
• A steady, restless wave with peaks reaching roughly the middle of the canvas is the healthy range for speech. Peaks should vary naturally as words come and go.
• A block that fills the canvas edge to edge is clipping — the signal is being cut off at the input stage. The lost detail cannot be recovered later, so re-take it quieter.

Because of how the analyser is configured here, this drawing is a visual aid, not a level meter. It is not calibrated to dBFS, it applies a smoothing constant so the bars fall back smoothly instead of snapping, and its vertical scale depends on the canvas height, which changes with the window. Use it to see that the microphone is alive and roughly how loud you are. Do not use it to set final levels, judge a -18 LUFS delivery target or decide whether a take will pass a loudness standard — for that you need a metering tool that reports real numbers.

One small optimisation is built in: while the tab is hidden the requestAnimationFrame loop is paused, so a background tab does not burn processor time drawing a waveform nobody can see. The audio keeps recording regardless — the visualiser is decoration, not the capture path.

File formats and compatibility

Browser recording is a negotiation, not a setting. There is no single audio/webm flag that every browser understands, so the tool asks MediaRecorder which of a short list of container and codec pairs it supports and uses the first one that answers yes. The extension on the download link is derived from that same answer, so you never get an .m4a file that is really WebM.

Two practical notes about the audio inside those containers. Opus is a modern, low-latency codec and generally sounds better per kilobyte than MP3 at speech bitrates; AAC is older but has the widest device support. Both are lossy, which means each re-encode loses a little information — so keep the original download as your master and convert a copy for the destination that needs a different format.

If your editor or app will not open the file

Convert rather than re-record. A WebM/Opus file can be converted to WAV (lossless from the decoded stream, but large), MP3 (universally accepted) or M4A/AAC (good size and support) with any audio converter. Converting to WAV is the safest stop before editing, because it removes the container question entirely; then export your edit back to AAC or MP3 for delivery.

Recording quality and file size

Browser recording is compressed on the fly, so quality and size trade against each other continuously rather than as a one-off export choice. At the default settings most browsers use for a single mono microphone, roughly 1 MB of audio per minute is a good rule of thumb — a 5-minute memo lands around 4–6 MB. An hour-long interview can pass 50 MB, which is worth knowing before you try to email it.

The numbers move with content as well as settings: silence compresses to almost nothing, while music with cymbals and reverb is far more expensive than speech at the same bitrate. If file size is the constraint, record in shorter takes and download each one, rather than producing a single hour-long file you then have to split.

Keeping the quality you started with

• Fix the source before the codec. Microphone position, room noise and input gain affect the result more than any bitrate setting. A quiet room with a close microphone at a sensible level will beat a noisy room at a higher bitrate every time.
• Avoid clipping, not level. Lossy encoders forgive a quiet recording — you can raise it later — but they cannot restore detail that was cut off at the input. Aim for peaks around the middle of the waveform canvas.
• Do not re-encode for fun. Each conversion to a lossy format adds a generation of damage. Keep the original download, convert once for the destination, and archive the original.
• Mind the memory ceiling. This page keeps the ten most recent clips in memory and drops the oldest when an eleventh arrives. That protects a low-memory device, but it also means long sessions need download-as-you-go discipline.

Frequently asked questions

Is my recording uploaded or stored on a server?

No. The microphone stream is captured by the browser with getUserMedia, compressed by MediaRecorder and held in memory as a Blob that only your tab can see. There is no upload step, no server-side copy and no account. The moment you press Delete — or close the tab — the audio is gone, because closing a tab discards everything held in memory. That also means a recording is not a backup: download the clip before you leave the page.

Why does the browser ask for microphone permission?

Because the browser is the only party that can open the microphone, and it deliberately makes the page ask you first. Until you accept the prompt, the page receives nothing — the recorder cannot listen in the background and cannot start before you click Record. If you denied it by accident, the padlock or camera icon in the address bar lets you reset that choice for this site; reload the page afterwards.

Why does nothing happen — or why is the microphone blocked?

The two usual causes are an insecure context and an unavailable device. Microphone capture is only exposed on HTTPS pages (and on localhost during development); over plain HTTP, navigator.mediaDevices is simply undefined, so the tool shows a 'secure connection required' notice instead of failing silently. The other cause is a missing or muted input device: unplugged headsets, a webcam with its built-in mic disabled, or another app holding the microphone exclusively. Check the picker next to the Record button and try a different input.

Which file format will I get, and can my editor open it?

The tool asks MediaRecorder for the best format the browser advertises and falls back to plain WebM. Chrome, Edge and Firefox on desktop normally produce WebM with Opus audio (.webm), which every modern player handles but older editors and some mobile social apps reject. Safari usually produces MPEG-4 AAC (.m4a), which is broadly compatible. If your target app refuses the file, convert it to WAV or MP3 in a converter tool before editing; the audio data itself is identical.

Sources & further reading

• MDN Web Docs — MediaRecorder — The API behind the recording: how start() and stop() work, why the final dataavailable event matters, and the browser support table for each container.
• MDN Web Docs — MediaDevices.getUserMedia() — Explains the microphone permission prompt, the constraints object used to request a specific input, and the NotAllowedError and NotFoundError failures the UI translates into plain messages.
• MDN Web Docs — AnalyserNode — Documents getByteTimeDomainData() and getByteFrequencyData(), the two methods the live waveform is drawn from, plus fftSize and smoothingTimeConstant.