OpenDAW Headless Demos

Interactive demos showcasing the OpenDAW SDK for building web-based audio applications.

Quick Start

npm install
npm run dev

Visit http://localhost:5173 to explore the demos.

Demos

Demo	Description
Effects & Mixer	Multi-track mixer with reverb, compressor, delay, lo-fi crusher, and stereo width effects
Track Editing	Split, move, and rearrange audio regions on a timeline
Recording API	Microphone recording with live 60fps waveform, device selection, mono/stereo, input gain, and monitoring modes
MIDI Recording	Record MIDI notes with device/channel selection, on-screen piano keyboard, and step recording
Loop Recording & Takes	Record multiple takes over a loop region with per-take waveforms and mute controls
Drum Pattern Scheduling	Schedule drum samples across a timeline with visual playback
Looping	Timeline loop areas, adjustable boundaries, and real-time loop iteration tracking
TimeBase Comparison	Musical vs Seconds TimeBase and how regions behave with BPM changes
Tempo Automation	Preset tempo patterns (accelerando, ritardando, stepped) with real-time metronome response
Time Signature Changes	Preset signature sequences (waltz, prog rock, film score) with adaptive metronome
Clip Fades	Logarithmic, linear, and exponential fade curves with visual representations
Mixer Groups	Sub-mixing with group buses: Track → Group → Master signal flow

Documentation

Full Documentation — Guides for building DAW interfaces with OpenDAW:

• Introduction — DAW concepts and system architecture
• PPQN Fundamentals — Timing systems
• AnimationFrame — Observable updates (required reading)
• Box System — Data model and state management
• Sample Management & Peaks — Audio loading and waveforms
• Timeline Rendering — Building timeline UI
• Complete Example — Full working application
• Recording Guide — Audio/MIDI recording, takes, monitoring, live peaks
• Track Editing & Fades — Region editing and fade support
• Audio Export — Mix and stems export
• Tempo Automation — Variable BPM playback
• Time Signature Changes — Signature events
• Mixer Groups — Sub-mixing and track routing

Deployment

OpenDAW requires SharedArrayBuffer, which needs these HTTP headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Configuration files for Cloudflare Pages, Netlify, and Vercel are included.

Note: GitHub Pages does not support custom headers and cannot be used.

npm run build     # Build to dist/
npm run preview   # Preview build locally

Project Structure

src/
├── components/                        # Reusable UI components
├── hooks/                             # Custom React hooks
├── lib/
│   ├── projectSetup.ts                # OpenDAW initialization
│   ├── trackLoading.ts                # Track loading with queryLoadingComplete
│   ├── groupTrackLoading.ts           # Group bus creation + track routing
│   ├── audioUtils.ts                  # Format detection, file loading
│   └── CanvasPainter.ts              # Canvas rendering helper
├── effects-demo.tsx                   # Multi-track mixer with effects
├── track-editing-demo.tsx             # Region split/move editing
├── recording-api-react-demo.tsx       # Audio recording with live peaks
├── midi-recording-demo.tsx            # MIDI recording + step recording
├── loop-recording-demo.tsx            # Loop recording with takes
├── drum-scheduling-demo.tsx           # Drum pattern scheduling
├── looping-demo.tsx                   # Loop area controls
├── timebase-demo.tsx                  # Musical vs Seconds TimeBase
├── tempo-automation-demo.tsx          # Tempo automation patterns
├── time-signature-demo.tsx            # Time signature changes
├── clip-fades-demo.tsx                # Fade curve types
└── mixer-groups-demo.tsx              # Group bus sub-mixing

License

See LICENSE for details.