|
Created HTML-based visualizer for .track files with:
Features:
- Load .track files via file input button
- Zoomable timeline (horizontal zoom with mouse wheel)
- Scrollable view (Shift+wheel for horizontal scroll)
- Vertical zoom controls for pattern boxes
- Click & drag panning
Visualization:
- Color-coded pattern boxes (deterministic HSL colors from name hash)
- Automatic stack-based layout (prevents overlapping patterns)
- Beat grid lines within each pattern (vertical lines at beat boundaries)
- Beat numbers displayed when zoomed in
- Sample ticks showing when events trigger (height varies with volume)
- Alternating beat background (full-height rectangles for easy counting)
- Time ruler with second markers at top
Technical:
- Single standalone HTML file (13KB, no dependencies)
- Pure HTML5 Canvas + JavaScript
- Parses .track format: SAMPLE, PATTERN, SCORE sections
- Responsive canvas sizing based on track duration
- 120 BPM timing (2 beats per second)
Files:
- tools/track_visualizer/index.html (visualizer)
- tools/track_visualizer/README.md (documentation)
Usage: Open index.html in browser, load assets/music.track
|
