How browsers record audio
Browsers have been able to record audio for over a decade. Understanding the three APIs involved explains most of the odd behaviour you run into — including why you cannot get an MP3 without waiting.
Three APIs, three jobs
- getUserMedia
- Asks for permission and hands back a live audio stream
- MediaRecorder
- Encodes that stream into a compressed file
- Web Audio API
- Gives access to the raw samples for analysis or custom encoding
A recorder uses the first, then either the second or the third depending on what output it needs.
Getting permission
Calling getUserMedia triggers the browser's permission prompt. Three rules govern it, and all three exist for good reasons:
- HTTPS is mandatory. Microphone access is unavailable on plain HTTP, with an exception for
localhostduring development. - A user gesture is usually required. Safari enforces this strictly; a page cannot open a microphone on load.
- Device names are hidden until permission is granted, so pages cannot fingerprint your hardware without asking.
Permission is per-origin. Granting it to one site says nothing about any other, and browsers differ on whether the grant is permanent (Chrome) or per-session unless remembered (Firefox).
MediaRecorder and its format limits
MediaRecorder takes the stream and produces an encoded file, using the codecs the browser already ships for playback. That is why the available formats are what they are:
| Browser | Native output |
|---|---|
| Chrome, Edge, Firefox | Opus in a WebM container |
| Safari | AAC in an MP4 container (.m4a) |
| Any browser | No MP3, no WAV |
MP3 is absent for historical reasons — patents discouraged inclusion, and by the time they expired in 2017 Opus was better and already implemented. WAV is absent because MediaRecorder is designed for compressed output.
Getting WAV and MP3 anyway
Both require the Web Audio API rather than MediaRecorder. The stream goes into an audio graph, a processing node exposes the raw float samples, and the page collects them as recording proceeds.
For WAV, convert those floats to 16-bit integers and write a 44-byte RIFF header in front of them. That is the entire format. It is fast, which is why WAV files appear instantly.
For MP3, feed the samples through an encoder compiled to JavaScript or WebAssembly. That is real computation happening on your processor, which is why a long MP3 recording takes a noticeable moment to finish after you press stop.
Why nothing needs a server
Every step above happens in the tab. The finished audio becomes a Blob, and URL.createObjectURL turns it into a link pointing at your own memory. Attach that to a download link and the browser saves it locally. At no point does the audio need to touch a network.
Sites that upload do so to provide features that a browser cannot — shareable links, server-side editing, cloud storage. The upload is a product decision, not a technical necessity.
The main limitations
- Memory. Recordings are held in RAM until downloaded, so length is bounded by available memory.
- Backgrounding. Browsers throttle or suspend inactive tabs, so recording needs the tab visible.
- Mono. Multi-channel capture is poorly supported across browsers.
- Bit depth. 16-bit output is the practical ceiling in a browser.
- No background operation. Locking a phone ends the recording, which a native app avoids.
- How this site worksThe same detail, specific to this implementation.
- MP3 vs WAVChoosing between the two.
- Browser supportWhich versions support what.
- Microphone permissionsThe permission model in practice.
More in guides
- Microphone not working in your browser
- MP3 vs WAV
- Reducing background noise
- Best microphone settings for voice
See all guides — two kinds of guide: fixing something that is broken, and getting a better result from something that already works.
Questions
Why can't browsers record MP3 directly?
No browser implemented MP3 encoding in MediaRecorder. Patent concerns discouraged it originally, and by the time those expired in 2017 Opus was both better and already shipped. Pages that offer MP3 run an encoder in JavaScript instead.
Why does recording require HTTPS?
Because microphone access over plain HTTP could be intercepted or injected by anyone on the network path. Browsers restrict it to secure contexts, with an exception for localhost during development.
What is the difference between MediaRecorder and the Web Audio API?
MediaRecorder produces an encoded file directly and is simple but limited to the browser's own codecs. The Web Audio API exposes raw samples, which lets a page build any format itself — at the cost of doing the encoding work.
Can a website record me without asking?
No. getUserMedia always triggers a permission prompt, and browsers show a visible recording indicator that pages cannot suppress. A site could record after you grant permission, which is why permanent grants deserve some thought.
Why can't I record in the background?
Browsers throttle inactive tabs to save battery, and mobile operating systems suspend them entirely when the screen locks. Background recording needs a native app.
Is browser recording quality worse than an app's?
Not inherently — both read the same hardware. Browsers are limited to 16-bit mono in practice, which is well beyond what speech recording requires.