Web Audio API Explained: How Browser Audio Tools Work
Technical Concepts7 min read
Web Audio API Explained: How Browser Audio Tools Work
The Web Audio API is a browser standard that lets JavaScript decode, manipulate, and encode audio entirely in memory — without uploading files to a server. It's the technology that makes tools like sound-goods possible.
Every time you use a browser-based audio tool that claims to process files "locally" or "without upload," it's using the Web Audio API. Understanding how it works helps you evaluate which tools are genuinely local and why the no-upload claim is technically meaningful rather than just marketing.
What is the Web Audio API?
The Web Audio API is a W3C web standard, first introduced in Chrome 10 (2011) and now supported by all major browsers. It provides a JavaScript interface for processing and synthesizing audio — everything from simple playback to real-time effects, synthesis, and encoding.
Unlike the HTML <audio> element (which just plays files), the Web Audio API gives JavaScript direct access to audio samples as raw floating-point numbers, called PCM (Pulse Code Modulation) data.
The processing pipeline
When you drop an audio file into sound-goods, here's exactly what happens in your browser:
File read (FileReader API)
The browser's FileReader API reads the selected file from your local disk into an ArrayBuffer — a block of raw binary data in memory. No network request is made. The file is read from disk directly into the browser's JavaScript sandbox.
Audio decode (AudioContext.decodeAudioData)
The AudioContext object decodes the compressed audio (MP3, WAV, FLAC, etc.) into raw PCM samples. Each sample is a floating-point number between −1.0 and +1.0 representing the amplitude at that moment in time. A 3-minute stereo MP3 at 44.1kHz becomes approximately 15.9 million samples (2 channels × 44,100 samples/sec × 180 seconds).
Processing (JavaScript array manipulation)
The PCM sample array is manipulated in JavaScript. For a cut: samples outside the selection range are discarded. For a speed change: samples are interpolated or decimated. For vocal removal: L and R channel arrays are subtracted.
Encoding (lamejs MP3 encoder)
The processed PCM samples are fed into the lamejs MP3 encoder — an open-source JavaScript port of the LAME MP3 encoder. lamejs reads PCM samples in blocks of 1,152 (one MP3 frame) and outputs compressed MP3 binary data.
Download (Blob URL)
The MP3 binary data is wrapped in a Blob object and a temporary URL is created using URL.createObjectURL(). An anchor element with the download attribute triggers the browser's native download. The Blob URL is revoked after download. The audio data is then garbage-collected.
Why no server is involved: Every step above — FileReader, AudioContext, JavaScript manipulation, lamejs encoding, Blob download — runs in the browser's JavaScript engine on your device's CPU. The only server interaction is the initial load of the HTML, CSS, and JavaScript files that constitute the tool. Your audio data never appears in any network request.
The regular AudioContext processes audio in real time — a 5-minute file takes 5 minutes to play through. The OfflineAudioContext renders audio to a buffer as fast as the CPU allows — typically 10–50× real-time speed. sound-goods Speed Changer uses this to export a 10-minute sped-up file in under 5 seconds rather than waiting 10 minutes.
Try the tools built on the Web Audio API
All sound-goods tools use Web Audio API for local processing. Free, no upload.
The main limitation is Safari's codec support — Apple restricts FLAC and OGG decoding in Safari/WebKit. For these formats on iPhone or Mac Safari, use Chrome.
Frequently asked questions
The Web Audio API is a W3C browser standard that gives JavaScript direct access to audio samples, allowing audio decoding, manipulation, effects, synthesis, and encoding — all without uploading files to a server.
sound-goods uses the Web Audio API's AudioContext.decodeAudioData() to decode audio files directly in your browser's JavaScript engine. The resulting PCM samples are manipulated by JavaScript and re-encoded using lamejs — an open-source JS MP3 encoder. No network request is made for your audio data.
PCM (Pulse Code Modulation) is the raw digital representation of audio — a sequence of numbers (samples) where each value represents the amplitude of the sound wave at a specific moment in time. CD audio uses 44,100 samples per second (44.1 kHz). The Web Audio API stores PCM samples as 32-bit floating-point numbers between −1.0 and +1.0.
lamejs is an open-source JavaScript port of the LAME MP3 encoder. It reads raw PCM samples and outputs compressed MP3 binary data. sound-goods uses lamejs for all MP3 exports, running entirely in your browser at no cost.
Yes — Chrome on Android and Safari on iOS 14.5+ both support the Web Audio API. Safari has codec limitations (no FLAC or OGG), but MP3, WAV, and M4A work across all modern mobile browsers.
Leave a Reply