b1rdmania
4fdc6984bc
- Improved search results table with detailed metadata display - Added functionality to preview original MIDI alongside generated motifs - Implemented automatic selection of the best result with visual confidence indicators - Enhanced user experience with a "Try Next Result" button for A/B testing These updates provide users with better insights into MIDI quality and facilitate easier comparisons between original and generated compositions.
MOTIF
Procedural Music Synthesis from MIDI Structure
Motif extracts structural information from existing music and re-instantiates it as original, real-time audio using the Web Audio API. Music as executable structure, not static audio.
Quick Start
# Install dependencies for both frontend and backend
npm install
cd server && npm install && cd ..
# Run both frontend and backend
npm run dev:all
# Or run separately:
npm run dev:backend # Backend on :3001
npm run dev # Frontend on :3000
Architecture
- Frontend: TypeScript + Vite + Web Audio API
- Backend: Express API for MIDI search and fetching
- MIDI Sources: BitMidi, Dongrays (with synthetic fallback)
- Synthesis: Pure procedural Web Audio (no samples)
How it works
- Search for MIDI by song name
- Extract structural features (tempo, density, roles)
- Map to synthesis layers (bass, drone, ostinato, texture)
- Generate original audio with similar "feel"
Project Structure
src/
├── core/ # MotifEngine, RoleMapper
├── synthesis/ # Web Audio synthesis engine
├── midi/ # MIDI parsing and processing
├── services/ # Backend API client
└── types/ # TypeScript interfaces
server/
├── src/
│ ├── adapters/ # MIDI search adapters
│ ├── services/ # Search and fetch logic
│ └── utils/ # Scoring and validation
└── cache/ # MIDI file cache
API
GET /api/midi/search?q=song- Search for MIDI filesGET /api/midi/fetch?u=url- Fetch and validate MIDI
Built as a technical experiment in procedural audio and Web Audio capabilities.