1 files changed, 11 insertions, 5 deletions
diff --git a/tools/mq_editor/viewer.js b/tools/mq_editor/viewer.js
index 46876c1..fea5cd0 100644
--- a/tools/mq_editor/viewer.js
+++ b/tools/mq_editor/viewer.js
@@ -38,7 +38,9 @@ class SpectrogramViewer {
     this.cursorCtx = this.cursorCanvas ? this.cursorCanvas.getContext('2d') : null;
     this.mouseX = -1;
 
-    // Playhead
+    // Playhead overlay
+    this.playheadCanvas = document.getElementById('playheadCanvas');
+    this.playheadCtx = this.playheadCanvas ? this.playheadCanvas.getContext('2d') : null;
     this.playheadTime = -1; // -1 = not playing
 
     // Spectrum viewer
@@ -119,10 +121,11 @@ class SpectrogramViewer {
     this.playheadTime = time;
     if (time >= 0) {
       this.spectrumTime = time;
+      this.renderSpectrum();
     } else if (this.mouseX >= 0) {
       this.spectrumTime = this.canvasToTime(this.mouseX);
     }
-    this.render();
+    this.drawPlayhead();
   }
 
   setPartials(partials) {
@@ -384,15 +387,18 @@ class SpectrogramViewer {
   }
 
   drawPlayhead() {
+    if (!this.playheadCtx) return;
+    const ctx = this.playheadCtx;
+    const h = this.playheadCanvas.height;
+    ctx.clearRect(0, 0, this.playheadCanvas.width, h);
     if (this.playheadTime < 0) return;
     if (this.playheadTime < this.t_view_min || this.playheadTime > this.t_view_max) return;
-    const {ctx, canvas} = this;
     const x = this.timeToX(this.playheadTime);
-    ctx.strokeStyle = '#f00';
+    ctx.strokeStyle = 'rgba(255, 80, 80, 0.9)';
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(x, 0);
-    ctx.lineTo(x, canvas.height);
+    ctx.lineTo(x, h);
     ctx.stroke();
   }