Interactive demos showcasing the OpenDAW SDK for building web-based audio applications.
npm install
npm run devVisit http://localhost:5173 to explore the 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 |
| Track Automation | Volume, pan, and effect parameter automation with preset patterns and canvas visualization |
| Clip Looping | Set loop regions within audio clips and extend to tile automatically with waveform visualization |
| Clip Fades | Logarithmic, linear, and exponential fade curves with visual representations |
| Time & Pitch | Switch a region between NoStretch / PitchStretch / TimeStretch, retune in cents, and adjust the project reference pitch (A4) with audible auto-engage |
| Mixer Groups | Sub-mixing with group buses: Track → Group → Master signal flow |
| Comp Lanes | Comp between simulated takes using volume automation crossfades with configurable duration |
| Werkstatt | Write custom audio effects in JavaScript with pre-built examples and runnable code |
| Audio Export | Export audio with range selection, metronome control, and offline rendering |
Full Documentation — Guides for building DAW interfaces with OpenDAW.
To run the documentation site locally with live reload:
npm run docs:dev # serves at http://localhost:5173/docs/
npm run docs:build # static build to dist/docs/
npm run docs:preview # preview the static buildThe chapter list below links to the rendered markdown on GitHub:
- Quick Start — fastest path from
npm installto a playing project - System Architecture — thread model, package layout, render pipeline
Core handbook
- Introduction — DAW concepts and system architecture
- Timing & Tempo — PPQN, tempo automation, time signatures
- AnimationFrame — Observable updates
- Box System & Reactivity — Data model, subscriptions, reactive lifecycle
- Samples, Peaks & Looping — Audio loading, waveforms, region looping
- Timeline & Rendering — Building timeline UI
- Building a Complete App — Full working application, mixer groups
- Recording — Audio/MIDI recording, takes, monitoring, live peaks
- Editing, Fades & Automation — Region editing, clip fades, track automation, comp lanes
- Export & Offline Rendering — Mix and stems export, offline rendering
- Effects — Effect types, creation, track/master integration
Feature guides
- MIDI Deep Dive — Notes, hardware input, MIDI effects, synth tuning
- Modular Devices — Apparat, Vaporisateur, Playfield, Werkstatt
- Time & Pitch — NoStretch / PitchStretch / TimeStretch, transients, concert pitch
Appendix
- Browser Compatibility — Supported browsers, headers, SharedArrayBuffer
- Troubleshooting & FAQ — Common errors and fixes
- Glossary — SDK and DAW terminology
- Performance & Debugging — Profiling, AnimationFrame patterns, leak hunting
For the SDK-internals series (contributors), see documentation/internals/.
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 locallysrc/
├── 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
└── demos/
├── playback/ # Playback, editing, and mixing demos
│ ├── comp-lanes-demo.tsx # Take comping with volume automation crossfades
│ ├── clip-fades-demo.tsx # Fade curve types
│ ├── clip-looping-demo.tsx # Region loop tiling
│ ├── drum-scheduling-demo.tsx # Drum pattern scheduling
│ ├── looping-demo.tsx # Loop area controls
│ ├── mixer-groups-demo.tsx # Group bus sub-mixing
│ ├── time-pitch-demo.tsx # Play modes, cents, project reference pitch
│ ├── timebase-demo.tsx # Musical vs Seconds TimeBase
│ └── track-editing-demo.tsx # Region split/move editing
├── recording/ # Recording demos
│ ├── recording-api-react-demo.tsx # Audio recording with live peaks
│ └── loop-recording-demo.tsx # Loop recording with takes
├── midi/ # MIDI demos
│ └── midi-recording-demo.tsx # MIDI recording + step recording
├── automation/ # Automation demos
│ ├── track-automation-demo.tsx # Volume/pan/effect automation
│ ├── tempo-automation-demo.tsx # Tempo automation patterns
│ └── time-signature-demo.tsx # Time signature changes
├── effects/ # Effects demos
│ ├── effects-demo.tsx # Multi-track mixer with effects
│ └── werkstatt-demo.tsx # Custom scriptable audio effects
└── export/ # Export demos
└── export-demo.tsx # Audio export with range selection
This project uses the OpenDAW SDK. See OpenDAW for licensing details.