Update README for GitHub and add project About details.

This commit is contained in:
b1rdmania
2025-12-18 14:43:20 +00:00
parent 2c9d06d8d7
commit 6daacb6bb5
+57 -31
View File
@@ -1,59 +1,85 @@
# MOTIF
**Procedural Music Synthesis from MIDI Structure**
Search real MIDI, play it in-browser, then generate a Motif variation.
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.
MOTIF is a small experiment in **music-as-code**: treat MIDI as structural data, not audio. It pulls MIDI patterns from the web, plays the original performance, then generates a “similar-but-different” procedural version using Web Audio.
## Quick Start
## About
- **What it does**: Search songs → pick a result → play the original MIDI → generate and play a Motif variant.
- **Why its fun**: Its like “hear a MIDI version of anything”, then remix it into something new.
- **Status**: Working locally end-to-end. Hosted frontend exists, backend hosting may be separate depending on deployment.
## Live demo
- **Frontend**: `https://motif-46uf00ypw-boom-test-c54cde04.vercel.app`
Note: if the backend isnt deployed/configured for the demo environment, search/fetch wont work from the hosted URL. Run locally for the full experience.
## Features
- **MIDI search** (currently BitMidi; additional sources optional)
- **MIDI fetch + validation + caching** via an Express backend
- **Browser playback** with multiple engines:
- Tone.js sampled piano
- Soundfont piano
- Custom WebAudio synth preview
- **Motif generation**: role-based synthesis (bass / drone / ostinato / texture / accents) from parsed MIDI structure
## Quick start (local)
```bash
# Install dependencies for both frontend and backend
# Install frontend deps
npm install
# Install backend deps
cd server && npm install && cd ..
# Run both frontend and backend
npm run dev:all
# Run backend (http://localhost:3001)
npm run dev:backend
# Or run separately:
npm run dev:backend # Backend on :3001
npm run dev # Frontend on :3000
# Run frontend (Vite prints the URL, typically http://localhost:5173)
npm run dev
```
## Architecture
## How it works (pipeline)
- **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)
1. User searches for a song
2. Backend searches MIDI sources and returns ranked candidates
3. Backend fetches the selected `.mid`, validates it, and caches it
4. Frontend parses MIDI into normalized note events
5. User can:
- **Play original MIDI** (soundfont/sampler playback), or
- **Generate Motif** (procedural Web Audio synthesis derived from structure)
## How it works
## Backend API
1. Search for MIDI by song name
2. Extract structural features (tempo, density, roles)
3. Map to synthesis layers (bass, drone, ostinato, texture)
4. Generate original audio with similar "feel"
- `GET /api/midi/search?q=song`
- `GET /api/midi/fetch?u=url` (URL must be encoded)
- `GET /api/midi/parse?u=url`
- `GET /health`
## Project Structure
## Project structure
```
src/
├── core/ # MotifEngine, RoleMapper
├── synthesis/ # Web Audio synthesis engine
├── midi/ # MIDI parsing and processing
├── midi/ # Parsing + feature extraction
├── services/ # Backend API client
├── synthesis/ # Players + procedural synthesis engine
└── types/ # TypeScript interfaces
server/
├── src/
│ ├── adapters/ # MIDI search adapters
│ ├── services/ # Search and fetch logic
│ └── utils/ # Scoring and validation
└── cache/ # MIDI file cache
│ ├── adapters/ # MIDI search adapters (sources)
│ ├── services/ # Search/fetch/parse
│ └── utils/ # Scoring, validation, MIDI helpers
└── cache/ # Downloaded MIDI cache (local dev)
```
## API
## Roadmap
- `GET /api/midi/search?q=song` - Search for MIDI files
- `GET /api/midi/fetch?u=url` - Fetch and validate MIDI
Built as a technical experiment in procedural audio and Web Audio capabilities.
- **More sources**: add/replace flaky scrapers with more reliable sources
- **Better matching**: smarter ranking + metadata validation
- **Motif controls**: “more ominous”, “more dancey”, “more ambient”, etc.
- **Deployment**: host backend and wire frontend to it via env config