A web-based virtual guitar pedalboard built with React, TypeScript, and the Web Audio API. Process live guitar input through configurable effects chains with a visual drag-and-drop interface.
- Multi-device audio input - Select any audio input device, not just the system default
- Visual pedalboard - Drag-and-drop effects with cable visualization
- Core effects - Distortion, Overdrive, Delay, and Reverb
- Real-time monitoring - Input and output level meters with peak hold
- Preset system - Save, load, and export effect configurations locally
- Low-latency processing - Direct Web Audio API signal chain
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildOpen the app and click "Start Audio Engine" to begin. Select your audio input device (guitar interface, microphone, etc.) and start adding effects.
┌─────────────────────────────────────────────────────────────┐
│ React UI Layer │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ DeviceSelect│ │ Pedalboard │ │ PresetManager │ │
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
└────────────────────────────┬────────────────────────────────┘
│
┌────────────────────────────▼────────────────────────────────┐
│ React Hooks │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────┐ │
│ │useAudioEngine│ │useAudioDevices│ │ useLevelMeter │ │
│ └──────────────┘ └──────────────┘ └──────────────────────┘ │
└────────────────────────────┬────────────────────────────────┘
│
┌────────────────────────────▼────────────────────────────────┐
│ Audio Engine Layer │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────────┐ │
│ │ Input │──│ Effect 1 │──│ Effect 2 │──│ Output │ │
│ │ Node │ │ Node │ │ Node │ │ Node │ │
│ └──────────┘ └──────────┘ └──────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────┘
src/
├── audio/ # Audio engine (framework-agnostic)
│ ├── AudioEngine.ts # Main engine class - manages context, routing, effects
│ ├── types.ts # TypeScript interfaces
│ └── effects/
│ ├── BaseEffect.ts # Abstract base class with bypass routing
│ ├── Distortion.ts # WaveShaper hard clipping
│ ├── Overdrive.ts # Soft tanh clipping
│ ├── Delay.ts # DelayNode with feedback
│ └── Reverb.ts # ConvolverNode with generated IR
│
├── components/
│ ├── DeviceSelector.tsx # Audio input device dropdown
│ ├── LevelMeter.tsx # Canvas-based VU meter
│ ├── PedalLibrary.tsx # Effect palette
│ ├── PresetManager.tsx # Save/load presets
│ ├── Pedalboard/
│ │ ├── Pedalboard.tsx # Drag-and-drop container
│ │ ├── Pedal.tsx # Individual effect pedal
│ │ └── PedalControls.tsx # Parameter knobs
│ └── ui/
│ ├── Knob.tsx # Rotary control
│ ├── Switch.tsx # Toggle switch
│ └── LED.tsx # Status indicator
│
├── hooks/
│ ├── useAudioEngine.ts # Engine React integration
│ ├── useAudioDevices.ts # Device enumeration
│ ├── useLevelMeter.ts # Real-time level analysis
│ └── usePresets.ts # Preset CRUD
│
└── utils/
└── storage.ts # IndexedDB wrapper for presets
Separation of concerns: The audio engine (src/audio/) is framework-agnostic and could be used with Vue, Svelte, or vanilla JS. React integration happens through hooks.
Effect abstraction: All effects extend BaseEffect, which provides:
- Automatic bypass routing (dry/wet switching)
- Parameter management with min/max/default values
- Consistent
connect()/disconnect()/dispose()lifecycle
Graph-ready architecture: The signal chain is stored as serializable data, making it easy to add a node-based editor in the future for parallel routing and complex signal flows.
Web Audio best practices:
- Single
AudioContextinstance (singleton) - Audio input with
echoCancellation,noiseSuppression, andautoGainControldisabled for clean guitar signal AnalyserNodefor non-blocking level metering
| Effect | Implementation | Parameters |
|---|---|---|
| Distortion | WaveShaper with configurable curve | Drive, Tone, Level |
| Overdrive | Soft tanh clipping with pre-gain | Gain, Tone, Level |
| Delay | DelayNode with feedback loop | Time, Feedback, Mix |
| Reverb | ConvolverNode with generated impulse response | Decay, Mix |
Requires a modern browser with Web Audio API support:
- Chrome 66+
- Firefox 76+
- Safari 14.1+
- Edge 79+
MIT