b1rdmania
177e8fbed3
Backend Enhancements: - Add ParsedMIDIInfo with track analysis and quality issues - New /api/midi/parse endpoint for MIDI metadata extraction - Enhanced MIDIService with parseMIDI method MIDI Preview Player: - Complete MIDIPlayer class with polyphonic playback - Basic oscillator mapping (bass=square, mid=triangle, high=sine) - Lookahead scheduling with proper cleanup - Automatic stopping when MIDI ends New UI Flow: 1. Search → Results table with metadata 2. Select MIDI → Shows parsed info (duration, tracks, tempo) 3. Dual transport: Preview Original vs Generate Motif 4. Try Next Result button for easy A/B testing Search Results Table: - Title, source, confidence bar, duration, track count - Quality issues display (short duration, few notes, etc.) - Auto-select best result, manual selection available - Visual confidence bars and issue warnings This makes the project feel "real" - you can now: - See exactly what MIDI was found - Verify it's the right song via preview - Compare original vs procedural synthesis - Easily try different results 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
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.