From 94aa832ef673338865b28e5886537c85d6b6d876 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Tue, 17 Feb 2026 19:37:10 +0100
Subject: feat(mq_editor): Improve partial tracking and add audio playback

Tracking improvements:
- Frequency-dependent threshold (5% of freq, min 20 Hz)
- Candidate system requiring 3-frame persistence before birth
- Extended death tolerance (5 frames) for robust trajectories
- Minimum 10-frame length filter for valid partials
- Result: cleaner, less scattered partial trajectories

Audio playback:
- Web Audio API integration for original WAV playback
- Play/Stop buttons with proper state management
- Animated red playhead bar during playback
- Keyboard shortcuts: '2' plays original, '1' reserved for synthesis

Visualization:
- Power law (gamma=0.3) for improved spectrogram contrast

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 tools/mq_editor/viewer.js | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

(limited to 'tools/mq_editor/viewer.js')

diff --git a/tools/mq_editor/viewer.js b/tools/mq_editor/viewer.js
index 6ebf7e0..459cd9e 100644
--- a/tools/mq_editor/viewer.js
+++ b/tools/mq_editor/viewer.js
@@ -27,6 +27,9 @@ class SpectrogramViewer {
     // Tooltip
     this.tooltip = document.getElementById('tooltip');
 
+    // Playhead
+    this.playheadTime = -1; // -1 = not playing
+
     // Setup event handlers
     this.setupMouseHandlers();
 
@@ -35,6 +38,11 @@ class SpectrogramViewer {
     this.render();
   }
 
+  setPlayheadTime(time) {
+    this.playheadTime = time;
+    this.render();
+  }
+
   setPartials(partials) {
     this.partials = partials;
     this.render();
@@ -79,6 +87,23 @@ class SpectrogramViewer {
     this.renderSpectrogram();
     this.renderPartials();
     this.drawAxes();
+    this.drawPlayhead();
+  }
+
+  drawPlayhead() {
+    if (this.playheadTime < 0) return;
+    if (this.playheadTime < this.t_view_min || this.playheadTime > this.t_view_max) return;
+
+    const {ctx, canvas} = this;
+    const timeDuration = this.t_view_max - this.t_view_min;
+    const x = (this.playheadTime - this.t_view_min) / timeDuration * canvas.width;
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, canvas.height);
+    ctx.stroke();
   }
 
   // Render spectrogram background
@@ -144,7 +169,9 @@ class SpectrogramViewer {
         const magDB = 20 * Math.log10(Math.max(mag, 1e-10));
 
         const normalized = (magDB + 80) / 80;
-        const intensity = Math.max(0, Math.min(1, normalized));
+        const clamped = Math.max(0, Math.min(1, normalized));
+        // Power law for better peak visibility
+        const intensity = Math.pow(clamped, 0.3);
 
         const freqNorm0 = (freq - this.freqStart) / (this.freqEnd - this.freqStart);
         const freqNorm1 = (freqNext - this.freqStart) / (this.freqEnd - this.freqStart);
-- 
cgit v1.2.3