Feature: Web-based MIDI/DAW at /midi

[frogr]

Summary

Build a browser-based Digital Audio Workstation (DAW) accessible at /midi that allows users to create, play, and export music directly in the browser.

Features

Core DAW

• Piano roll / step sequencer for placing notes along a piano scale
• Multiple instrument tracks with independent controls
• Transport controls (play, pause, stop)
• Looping functionality with configurable loop points
• BPM/tempo control (40-240 range)

Instruments

• Multiple synthesizer types (sine, sawtooth, square, triangle)
• Drum machine/sampler with built-in sounds
• ADSR envelope controls
• Filter with cutoff and resonance

Pattern Helpers

• Quick fill patterns:
  • Fill every step
  • Fill every 2 steps
  • Fill every 4 steps
  • Fill every half step (32nd notes)
• Clear pattern
• Duplicate pattern

Recording

• Microphone recording with browser permissions
• Waveform visualization
• Record as audio track

MIDI Support

• External MIDI device support via Web MIDI API
• Connect MIDI keyboards and controllers
• MIDI device selector in UI

Project Management

• Save/load projects to localStorage
• New project creation
• Delete saved projects

Export

• Export to WAV format
• Export to MP3 format
• Download functionality

Technical Stack

• Tone.js: Web Audio synthesis, transport, scheduling
• lamejs: MP3 encoding for export
• React: UI components following existing patterns
• Glassmorphic UI: Matching existing site design

UI Design

• Matches existing AI pages style (Images, TTS)
• Glassmorphic containers with dark theme
• Responsive layout
• Keyboard shortcuts (Space = play/pause, etc.)

Files to Create/Modify

• Add route at /midi
• Add "MIDI" tab to navigation
• Create app/javascript/components/daw/ directory with component architecture
• Register DAW component in application.js

---

🤖 Generated with Claude Code