How does a browser produce real-time distortion, reverb, and delay? Here's the plain-English breakdown of the tech behind Guitar FX.
If you've ever wondered how a free browser tab can function as a guitar effects pedal — processing your live microphone input and applying distortion, reverb, and delay in real time — the answer is the Web Audio API. It's a browser-native audio processing system that gives JavaScript direct access to the sound card, and it's what powers Guitar FX & Looper.
This isn't a technical tutorial. It's a plain-English explanation of how the pieces fit together, so you understand what's happening when you open Guitar FX and start playing.
Every guitar effects pedal — hardware or software — works as a signal chain. Your guitar signal enters one end, passes through one or more processing stages, and exits as modified audio. The Web Audio API models this as a graph of audio nodes.
Think of it like plumbing. Your microphone input is the water source. Each effect is a pipe that changes the water in some way. The speaker output is the faucet. The Web Audio API lets you connect these pipes in any order you choose.
Key concept: In the Web Audio API, everything is a node. The microphone is a source node. Each effect is a processing node. The speaker is a destination node. You connect them to form the signal path.
Real tube distortion happens because vacuum tubes have a non-linear response — when pushed past clean headroom, the output waveform gets clipped and reshaped, creating harmonic distortion. The Web Audio API replicates this with a WaveShaperNode, which applies a mathematical curve to every audio sample. Feed in a sine wave, get back a shaped waveform with flattened peaks — just like a tube doing soft clipping. The curve's shape determines the distortion character. Guitar FX lets you dial in how aggressive the shaping is via the Distortion slider.
Reverb is what happens when sound bounces off walls, ceilings, and floors. The Web Audio API creates realistic reverb using a ConvolverNode, applying an impulse response — a mathematical fingerprint of a real space — to your audio signal. Convolution reverb is computationally expensive but sounds far more natural than algorithmic alternatives. The browser calculates this on every audio buffer in real time, which is genuinely impressive. The Reverb mix slider controls how much processed signal blends with your dry guitar signal.
Delay is conceptually simple: take the audio signal, wait a specified time, play it back. The Web Audio API has a dedicated DelayNode for this. The interesting part is feedback — feeding the delayed signal back into itself through a GainNode that reduces volume slightly each cycle, creating repeats that decay naturally. The Feedback slider controls how many times the delayed signal feeds back — a little gives you a single echo, a lot gives you cascading repeats.
The simplest node in the chain — a GainNode multiplies every audio sample by a constant, making the signal louder or quieter. Guitar FX uses this at the output stage as your master volume control.
The Tone control is a BiquadFilterNode configured as a high-pass filter. It attenuates frequencies below the set cutoff — rolling off bass and low-mids for a bright, cutting tone. High Hz values let everything through; low values remove brightness and leave a warmer, darker sound.
The main engineering challenge for browser guitar effects is latency — the delay between playing a note and hearing processed output. Modern browsers have gotten significantly better at minimizing this. Chrome currently achieves the lowest latencies, often around 10–30ms with a good USB audio interface — within the range of usable real-time playing. The key is using a dedicated audio interface rather than your computer's built-in sound card, which typically adds significant driver-level latency.
Tip: If you notice latency in Guitar FX, try: (1) using Chrome, (2) using a USB audio interface instead of built-in audio, and (3) closing other browser tabs to free up CPU resources.
The 4-track looper in Guitar FX adds a recording and playback layer on top of the effects chain. When you hit Record, the app uses the MediaRecorder API to capture the audio buffer over time. When you hit Loop, it plays that buffer in a continuous cycle using an AudioBufferSourceNode. Multiple tracks work by running four recording-and-playback chains simultaneously, each with its own effects nodes, mixed by a master GainNode before going to the speakers.
The practical upshot is straightforward: your browser is now a legitimate guitar effects processor for practice, songwriting, and performance preparation. You don't need a pedal collection, an audio interface, or any software installation. Tools like Guitar FX show how much is possible with browser-native APIs that have been quietly maturing for years — and the Web Audio API is supported across all modern browsers, so your rig is wherever you have a tab.
Open Guitar FX and experience the Web Audio API powering real guitar effects live in your browser.
⚙️ Open Guitar FX →