diff options
| -rw-r--r-- | tools/timeline_editor/README.md | 29 | ||||
| -rw-r--r-- | tools/timeline_editor/ROADMAP.md | 46 |
2 files changed, 71 insertions, 4 deletions
diff --git a/tools/timeline_editor/README.md b/tools/timeline_editor/README.md index 1c73c53..adf9d4e 100644 --- a/tools/timeline_editor/README.md +++ b/tools/timeline_editor/README.md @@ -9,13 +9,16 @@ Interactive web-based editor for `demo.seq` timeline files. - 📊 Visual Gantt-style timeline - 🎯 Drag & drop sequences along timeline - 🎯 Drag & drop effects along timeline +- 🎯 Resize effects with left/right handles - ⏱️ Edit timing (start/end times) -- ⚙️ Edit priorities +- ⚙️ Stack-order based priority system - ⚙️ Edit effect class names and constructor arguments - 🔍 Zoom in/out (10% - 200%) +- 🎵 Audio waveform visualization (WAV files) - 📋 Real-time statistics - 🗑️ Delete sequences/effects - ➕ Add new sequences +- 🎼 Snap-to-beat mode with beat markers ## Usage @@ -39,9 +42,27 @@ Interactive web-based editor for `demo.seq` timeline files. - Click "💾 Save demo.seq" - Choose where to save the modified file -5. **Zoom controls:** +5. **Load audio waveform (optional):** + - Click "🎵 Load Audio (WAV)" to visualize your music track + - The waveform appears above the timeline for visual reference + - Use it to align sequences with beats, drops, and musical phrases + - Click "✖ Clear Audio" to remove the waveform + + **Tip:** Generate a WAV file from your demo using: + ```bash + ./build/demo64k --dump_wav output.wav + ``` + Then load `output.wav` in the timeline editor to align sequences with the actual audio output. + +6. **Zoom controls:** - Use the zoom slider to adjust timeline scale - Higher zoom = more pixels per second + - Waveform scales automatically with zoom + +7. **Snap-to-beat mode:** + - Enable "Show Beats" checkbox to display beat markers + - Sequences and effects snap to beat boundaries when dragged + - Helps maintain musical timing ## Keyboard Shortcuts @@ -109,12 +130,12 @@ SEQUENCE 4b 1 "Beat Drop" ## Future Enhancements - [ ] Undo/redo functionality -- [ ] Add effect button +- [ ] Add effect button (create new effects within sequences) - [ ] Overlap detection warnings -- [ ] Snap-to-grid - [ ] Timeline playback indicator - [ ] Multiple file comparison - [ ] Export to different formats +- [ ] **Music.track visualization**: Parse `music.track` file and overlay tracker patterns/samples on timeline for alignment assistance ## Technical Details diff --git a/tools/timeline_editor/ROADMAP.md b/tools/timeline_editor/ROADMAP.md index 4a9d171..4bfc35c 100644 --- a/tools/timeline_editor/ROADMAP.md +++ b/tools/timeline_editor/ROADMAP.md @@ -421,6 +421,52 @@ function detectOverlaps() { --- +### 2.5 Music.track Visualization & Overlay +**Goal:** Display tracker patterns and samples alongside timeline for precise alignment. + +**Features:** +- Load `music.track` file (parse tracker score format) +- Render tracker patterns as horizontal bars above/below sequences +- Display sample triggers (kick, snare, bass notes) as vertical markers +- Color-code different sample types (drums, bass, melody) +- Show pattern names and beat divisions +- Toggle visibility (checkbox: "Show Tracker Score") +- Sync horizontal scale with timeline (pixels per second) +- Help users align visual sequences with audio events + +**Implementation Details:** +```javascript +// Parse music.track file format (similar to demo.seq parser) +function parseTrackerScore(content) { + // Extract patterns, events, sample triggers + // Return structured data: { patterns: [...], events: [...] } +} + +// Render tracker overlay on canvas or DOM elements +function renderTrackerOverlay() { + // Draw pattern bars + // Draw sample trigger markers (vertical lines) + // Label with sample names (KICK_1, BASS_E2, etc.) +} +``` + +**Visual Design:** +- Tracker patterns: Semi-transparent colored bars (green/yellow/purple) +- Sample triggers: Thin vertical lines with labels +- Pattern names: Small text above bars +- Positioned above waveform, below time markers + +**Use Case:** +- Load `music.track` to see exactly where drums/bass/melody trigger +- Align visual effect sequences with musical events +- Verify timing matches tracker score before testing in demo + +**Effort:** 12-15 hours +**Priority:** MEDIUM +**Dependencies:** Requires `music.track` file format specification + +--- + ## Phase 3: Advanced Features (Low Priority) ### 3.1 Timeline Playback Indicator |