Pedal Board

A browser-based guitar effects pedal board. Point a microphone at your guitar and play through software pedals in the browser — no plugins, no installs.

Pedals

Pedal	Description
LOOP-1	Loop pedal — record, overdub, and export loops

Getting started

Requires a local server — microphone access and ES modules both need HTTP(S), not a file:// URL.

# Option 1 — one-liner (Node required)
npx serve .

# Option 2 — VS Code
# Right-click index.html → "Open with Live Server"

Then open http://localhost:3000 in Chrome or Edge.

Grant microphone permission when prompted. If denied, check browser site settings for localhost.

LOOP-1 — how to use

Step	Action
1	Set BPM and TIME SIG by dragging the knobs or typing directly
2	Choose BARS (how many bars to record, or FREE for manual)
3	Press RECORD — one bar count-in plays (watch the beat LEDs), then recording starts
4	Play your guitar
5	Press RECORD again to finish, or it auto-stops after the set bars
6	The loop plays back. Press RECORD again to overdub
7	Press STOP to pause; CLEAR to unload the current loop
8	Click EXPORT .WAV or the WAV button on any loop in the list

Monitor toggle — pipes the live mic to your speakers. Leave it off unless you are wearing headphones, otherwise you will get feedback.

The LOOPS panel on the right lists every recorded loop. Click LOAD to swap it in, WAV to download it, or ✕ to delete it. Loop names are editable — click the name to rename.

Browser support

Chrome and Edge (recommended). Firefox works but may have higher audio latency. Safari is not supported (ScriptProcessorNode restrictions).

Adding a new pedal

See CLAUDE.md for the full developer guide.

Short version: create pedals/your-name/ with index.html, a CSS file, and JS modules following the same pattern as Loop-1, then add a card to the home index.html.

Tech stack

• Vanilla HTML, CSS, JavaScript (ES modules)
• Web Audio API
• No build tools, no dependencies