An online guitar pedal simulator, built from the graph up

What this is

This is a pedalboard that runs in a web page: an online guitar pedal simulator made of 15 effects, each one a small graph of audio processing that the page builds with the Web Audio API. You choose which pedals are on the board, what order the signal passes through them, which are switched on, and where every knob is set. The board starts with 8 pedals on it, and the rest are one press away under “Add a pedal”.

It is for trying things: what a phaser does to a chord, why people put the wah before the fuzz, what happens to a delay when the feedback goes up. Every effect has a page of its own that says what it does to the signal, draws its graph, explains each knob and lets you play that one pedal alone. The usual order of pedals, and the reasons for it, are on the signal chain page.

How to use the board

• Hear it. Choose a signal and press Start. The plucked string, the chord and the sustained note are synthesized by the page; nothing is loaded.
• Switch a pedal. Press its footswitch. A pedal that is bypassed is taken out of the signal path altogether, which is what true bypass means: the pedal before it is connected straight to the pedal after it.
• Turn a knob. Drag it sideways (with a mouse, up and down works as well), or give it the focus and use the arrow keys or the mouse wheel. Hold Shift while dragging for fine movement. Double-click to put it back where it started. The value is always shown in real units: milliseconds, hertz, decibels.
• Reorder. Drag a pedal by the handle at its top, with a mouse or a finger, or press the arrows either side of the handle. The numbers show the order the signal takes. With the keyboard, give an arrow the focus and press Enter or Space; the focus stays on the pedal as it moves, and the new position is announced.

Playing your own instrument through it

Choose “Your instrument” and press Start, and the browser will ask whether this page may use an audio input. Give it the input your guitar is plugged into: an audio interface is the usual way, and a microphone in front of an acoustic instrument works too. The page asks the browser to switch off its echo cancellation, noise suppression and automatic gain control, all three of which are made for speech on a call and all three of which would reshape a note.

Two warnings, both honest. First, browser audio has latency: the sound passes through the input device, the browser’s audio engine and the output device, and each holds it for a few milliseconds. The panel beside the Start button shows what the browser reports. If the total is large, the board will feel like playing through a long cable into a distant amplifier. Second, speakers and microphones make feedback: if the input can hear the output, the loop howls. Use headphones.

What is simulated, and what is not

Each pedal is a real signal-processing graph: filters, delay lines, gain stages, clipping curves, and for 5 of them a processor written sample by sample. None of them is a model of a particular product, and none claims to sound like one. The reverb’s impulse response is generated by the page from noise. The cabinet is a filter curve and is labelled as an approximation. There is no amplifier model: if you are looking for an online guitar amp, the nearest thing here is the overdrive, the EQ and the cabinet in a row, and the cabinet’s page says plainly what that is and is not.

The whole chain is mono, because a guitar is.

Tested, and how

Every effect was rendered offline, with a known signal in and the output measured: an impulse into the delay comes back at the set time, the tremolo’s level moves at the set rate, the phaser’s notches are where the arithmetic puts them. Switched off, each of the 15 pedals gave back its input identical in every sample. Of 73 checks, 73 came out as described. The measurements are printed on each effect’s page and the method is on the about page.

Presets and share links

A preset is the board as it stands: which pedals, in what order, which are on, and every knob. Presets are saved in this browser’s own storage and stay on this device. A share link carries the same information in the part of the address after the #, which browsers do not send to servers; whoever opens the link gets your board.

Elsewhere in the Sound room

For tuning on its own, with string targets for ten tunings and a reference tone, there is the Tuner, whose pitch detector the tuner pedal shares. Guitars is a computed fretboard: every note on every tuning, played as a synthesized string. Songbuilder has an eighteen-effect rack of its own behind fifteen synthesizers, and a line input; seven of its effects (drive, chorus, flanger, phaser, tremolo, delay and reverb) are kinds that are also here. The difference is the job: that rack mixes wet and dry signals for synth tracks, while this board is a guitar board with true bypass, a tuner, a gate, a compressor, a wah, an octave, fuzz, EQ and a cabinet, and a measured page for each.