MIDI Controller Support - FlowState DAW

MIDI Implementation Progress

5-Phase roadmap for complete hardware controller integration

5/5

Phases Complete

<5ms

MIDI Latency

Controller Presets

v2.2.3

Current Version

Target Controllers

🥁

Akai MPD218

16 velocity pads, 6 knobs, 3 banks

🎹

Korg nanoKEY2

25-key velocity keyboard

🎚️

Korg nanoKONTROL2

8 faders, 8 knobs, transport

🎼

M-Audio Keystation

32-key velocity keyboard

Implementation Phases

✅ Phase 1: Foundation (MVP)

COMPLETE

Core MIDI infrastructure - device detection, message parsing, and drum pad triggering.

✓ Web MIDI API integration (MIDIService.ts)
✓ TypeScript interfaces and MIDI constants
✓ Zustand state store (useMIDIStore.ts)
✓ React hooks (useMIDI, useMIDINote, useMIDICC, useMIDILearn)
✓ Device detection with hot-plug support
✓ MIDIIndicator component in header
✓ Drum machine MIDI input with velocity
✓ MPD218 and keyboard default presets

Files Created:

src/ ├── services/midi/ │ ├── MIDIService.ts # Singleton Web MIDI wrapper │ ├── types.ts # TypeScript interfaces │ ├── constants.ts # CC numbers, GM drum map, presets │ └── index.ts # Re-exports ├── stores/midi/ │ └── useMIDIStore.ts # Zustand + persistence ├── hooks/midi/ │ ├── useMIDI.ts # Main MIDI hook │ ├── useMIDINote.ts # Note On/Off events │ ├── useMIDICC.ts # Control Change events │ ├── useMIDILearn.ts # MIDI Learn mode │ └── index.ts # Re-exports └── components/midi/ └── MIDIIndicator.tsx # Header status + device selector

✅ Phase 2: Full Drum Integration

COMPLETE

Production-ready drum performance with visual feedback and step sequencer recording.

✓ Visual pad feedback (glow intensity matches velocity)
✓ Step sequencer recording from MIDI (useMIDIRecording hook)
✓ Quantization options (1/4, 1/8, 1/16, off)
✓ Overdub mode (add without erasing)
✓ MPD218 bank switching (A/B/C) - all 3 banks mapped
✓ Velocity captured in pattern data

New Features:

Recording arm button with visual indicator
Real-time recording during playback
Quantize dropdown in recording bar
Overdub toggle for layering patterns
Velocity-based glow intensity on pads

✅ Phase 3: Keyboard Support

COMPLETE

Full polyphonic keyboard support for synth playback and piano roll recording.

✓ Polyphonic note playback (16-voice PolySynth)
✓ Note duration from key hold with velocity
✓ Sustain pedal (CC#64) with proper note sustain
✓ Octave shift controls (-4 to +4 octaves)
✓ Transpose controls (-12 to +12 semitones)
✓ Velocity curves (linear, soft, hard)
✓ Recording to piano roll in real-time
✓ Quantization during recording (1/4, 1/8, 1/16, off)
✓ Keyboard settings UI panel

New Files & Features:

src/ ├── stores/midi/useMIDIStore.ts │ └── + keyboardState (octave, transpose, velocity curve) │ └── + keyboard actions (noteOn/Off, sustain, octave shift) ├── hooks/midi/ │ ├── useMIDIKeyboard.ts # Polyphonic keyboard hook │ └── usePianoRollRecording.ts # Piano roll MIDI recording ├── services/midi/ │ └── PianoRollRecording.ts # Recording service with quantization └── components/midi/ └── KeyboardSettings.tsx # Keyboard controls panel

Recording arm button in Piano Roll toolbar
Active notes indicator with voice count
Collapsible keyboard settings panel
Visual sustain pedal status

✅ Phase 4: Mixer & Control

COMPLETE

Hardware control of DAW parameters with MIDI Learn functionality.

✓ CC to parameter mapping system (MIDIMappingService)
✓ MIDI Learn mode UI with visual overlay
✓ Mixer faders from hardware (useMIDIMixer)
✓ Pan knobs from hardware
✓ Transport controls (play/stop/rec/loop)
✓ Controller preset library (6+ presets)
✓ Preset save/load with export/import

New Files & Features:

src/ ├── services/midi/ │ └── MIDIMappingService.ts # CC-to-param mapping + presets ├── hooks/midi/ │ ├── useMIDIMixer.ts # Mixer control via MIDI │ └── useMIDITransport.ts # Transport control via MIDI └── components/midi/ ├── MIDILearnOverlay.tsx # Visual learn mode └── MIDIMappingManager.tsx # Preset management UI

Controller presets: Akai MPD218, LPD8, Novation Launchkey, Arturia MiniLab, Generic Mixer, Keyboard Melodic
MIDI Learn buttons on mixer channel strips
Settings gear icon in transport bar
Export/import custom mappings as JSON

✅ Phase 5: Advanced Features

COMPLETE

Pro-level MIDI capabilities for complex studio setups and expressive controllers.

✓ MIDI clock sync (send/receive with tempo detection)
✓ Multi-controller support with per-device roles
✓ MIDI output to external synths (Note, CC, PitchBend)
✓ MPE support (Roli Seaboard, Linnstrument, Sensel Morph)
✓ Program Change for kit/preset switching
✓ Unified MIDI Settings panel with tabbed interface

New Files & Features:

src/ ├── services/midi/ │ ├── MIDIClockService.ts # Clock sync send/receive │ ├── MPEService.ts # MIDI Polyphonic Expression │ └── MultiControllerService.ts # Multi-device management ├── hooks/midi/ │ ├── useMIDIClock.ts # Clock sync hook │ ├── useMultiController.ts # Multi-controller hook │ ├── useMIDIMPE.ts # MPE expression hook │ └── useMIDIProgramChange.ts # Program change hook └── components/midi/ ├── MIDIIndicator.tsx # Enhanced with advanced status └── MIDISettingsPanel.tsx # Unified settings UI

Per-note pitch bend, pressure, slide for MPE controllers
Auto-detect device roles (drums, keyboard, mixer, MPE)
MIDI clock with latency compensation
External tempo detection from incoming clock
Song Position Pointer support for sync

Technical Architecture

Data Flow

MIDI Device (USB)
      ↓
Web MIDI API (browser)
      ↓
MIDIService.handleMessage()
      ↓
Message Parser (Note On/Off, CC, etc.)
      ↓
useMIDIStore (Zustand)
      ↓
React Hooks (useMIDI, useMIDINote, useMIDICC)
      ↓
Components (DrumMachine, PianoRoll, Mixer)
      ↓
Audio Engine (Tone.js) → Sound Output
                

Default MPD218 Mapping

// Pads Bank A (notes 36-51) → Drum Pads 1-16
Pad 1 (note 36) → Kick
Pad 2 (note 37) → Snare
Pad 3 (note 38) → Hi-Hat
Pad 4 (note 39) → Clap
...

// Knobs → Mixer Controls
Knob 1 (CC 3)  → Master Volume
Knob 2 (CC 9)  → Track 1 Volume
Knob 3 (CC 14) → Track 2 Volume
...
                

Browser Support

Browser	Web MIDI API	Notes
Chrome	✓ Full Support	Primary target
Edge	✓ Full Support	Chromium-based
Opera	✓ Full Support	Chromium-based
Firefox	✗ Not Supported	No Web MIDI API
Safari	✗ Not Supported	No Web MIDI API

FlowState gracefully degrades when MIDI is unavailable. The DAW remains fully functional with mouse/keyboard input.

Latency Performance

Sub-5ms MIDI-to-Audio Latency

Web MIDI API provides native USB latency (~1-2ms). Combined with optimized audio scheduling in Tone.js, FlowState achieves professional-grade responsiveness that matches or exceeds many desktop DAWs.

~1-2ms MIDI input

~2-3ms Audio scheduling

<5ms Total latency

Implementation Timeline

Phase	Duration	Deliverable	Status
Phase 1: Foundation	2 weeks	Basic drum triggering, device detection	✓ COMPLETE
Phase 2: Drum Integration	1 week	Recording, visual feedback, bank switching	✓ COMPLETE
Phase 3: Keyboard	2 weeks	Piano roll input, sustain pedal, polyphonic	✓ COMPLETE
Phase 4: Mixer Control	2 weeks	MIDI Learn, hardware faders, transport	✓ COMPLETE
Phase 5: Advanced	3 weeks	Clock sync, MPE, multi-controller	✓ COMPLETE

MVP: 3 weeks (Phase 1-2) | Production-Ready: 5 weeks (Phase 1-3) | Full Implementation: 10 weeks

Last Updated: December 26, 2025
Current Version: v2.2.0 (Phase 5 Complete - Full MIDI Implementation!)
Live URL: flowstate-daw.pages.dev