From 74554454d7f58a3d3a74c319289f7a853ccb476d Mon Sep 17 00:00:00 2001 From: skal Date: Sat, 7 Feb 2026 18:50:55 +0100 Subject: feat(tools): Add music track visualizer 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 --- tools/track_visualizer/index.html | 504 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 504 insertions(+) create mode 100644 tools/track_visualizer/index.html (limited to 'tools/track_visualizer/index.html') diff --git a/tools/track_visualizer/index.html b/tools/track_visualizer/index.html new file mode 100644 index 0000000..70a5fd8 --- /dev/null +++ b/tools/track_visualizer/index.html @@ -0,0 +1,504 @@ + + + + + + Music Track Visualizer + + + +
+ + +
+ Zoom: + + + +
+
+ Vertical: + + + +
+
+
+ +
+
+
Pan: Click and drag
+
Zoom: Mouse wheel
+
Scroll: Shift + wheel
+
Patterns: 0
+
Duration: 0s
+
+ + + + -- cgit v1.2.3