🎹 Modular Synth

A browser-based modular synthesizer with a step sequencer, built with React and the Web Audio API.

Features

🔊 Synthesis

• VCO (Voltage Controlled Oscillator): Sine, Triangle, Sawtooth, Square waveforms with octave and detune controls
• VCF (Voltage Controlled Filter): Low-pass, High-pass, Band-pass filters with cutoff and resonance
• ADSR Envelope: Attack, Decay, Sustain, Release with visual feedback
• Master Output: Volume control with real-time oscilloscope visualization

🎼 Sequencer

• 16-step sequencer with piano roll interface
• Scale-aware note input: Major, Minor, Pentatonic, Blues, Dorian, Phrygian, Lydian, Mixolydian
• Adjustable root note: C2, C3, C4, C5
• Tempo control: 40-240 BPM
• Swing: 0-75%
• Gate length: 10-100%
• Step accents: Shift+click for accent
• Pattern randomizer: Generate patterns based on selected scale

🎛️ Presets

• Acid: Classic TB-303 style resonant bass
• Techno: Punchy synth for electronic beats
• Ambient: Soft, evolving pads

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Building for Production

npm run build
npm run preview

Keyboard Shortcuts

Key	Action
Space	Play/Pause

How to Use

1. Click anywhere to initialize the audio context (required by browsers)
2. Create a pattern: Click cells in the piano roll grid to add/remove notes
3. Adjust the sound:
   • Change waveform in VCO module
   • Tweak filter cutoff and resonance
   • Shape the envelope (ADSR)
4. Press Play or hit Space to hear your sequence
5. Experiment: Try the presets, randomize patterns, change scales

Architecture

src/
├── audio/
│   ├── AudioEngine.js   # Web Audio API wrapper
│   └── Sequencer.js     # Step sequencer logic
├── components/
│   ├── Knob.jsx         # Rotary knob control
│   ├── Module.jsx       # Module container
│   ├── VCOModule.jsx    # Oscillator module
│   ├── VCFModule.jsx    # Filter module
│   ├── EnvelopeModule.jsx # ADSR envelope
│   ├── MasterModule.jsx # Master output
│   ├── Oscilloscope.jsx # Waveform display
│   ├── SequencerModule.jsx # Step sequencer
│   ├── TransportModule.jsx # Play/Stop controls
│   └── PresetModule.jsx # Sound presets
├── store/
│   └── synthStore.js    # Zustand state management
├── App.jsx
├── App.css
├── index.css
└── main.jsx

Technologies

• React 18: UI framework
• Vite: Build tool and dev server
• Zustand: State management
• Web Audio API: Audio synthesis
• CSS Variables: Theming

License

MIT

---

Made with 🎵 and ☕