diff --git a/index.html b/index.html
index 12fbcfb..c3a40be 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
 .big-time .sep { color: #6b7089; margin: 0 4px; }
 .canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; }
 .progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
-.waveform-wrap { flex: 1; overflow-x: auto; overflow-y: hidden; cursor: pointer; position: relative; height: 42px; }
+.waveform-wrap { flex: 1; cursor: pointer; position: relative; height: 42px; }
 .waveform-wrap canvas { display: block; height: 42px; }
 #noiz-overlay { position: fixed; opacity: 0.75; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; pointer-events: none; z-index: 9999; animation: fadeout 750ms ease 750ms forwards; }
 #noiz-overlay img { max-width: 50vw; max-height: 50vh; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }
@@ -610,41 +610,34 @@ function drawWaveform() {
   const visWidth = wrap.clientWidth;
   const canvas = waveformCanvas;
   const h = WF_HEIGHT;
+  canvas.style.width = visWidth + 'px';
   canvas.style.height = h + 'px';
-  if (!t || !t.waveform) {
-    canvas.style.width = visWidth + 'px';
-    canvas.width = Math.round(visWidth * dpr);
-    canvas.height = Math.round(h * dpr);
-    const ctx = canvas.getContext('2d');
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, visWidth, h);
-    return;
-  }
-  const wf = t.waveform;
-  const totalWidth = wf.len;
-  const newWidth = Math.max(totalWidth, visWidth);
-  canvas.style.width = newWidth + 'px';
-  canvas.style.height = h + 'px';
-  canvas.width = Math.round(newWidth * dpr);
+  canvas.width = Math.round(visWidth * dpr);
   canvas.height = Math.round(h * dpr);
   const ctx = canvas.getContext('2d');
   ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-  ctx.clearRect(0, 0, newWidth, h);
+  ctx.clearRect(0, 0, visWidth, h);
+  if (!t || !t.waveform) return;
+  const wf = t.waveform;
+  const data = wf.data;
   const halfH = h / 2;
   const ampScale = halfH * 0.85;
   let playheadX = -1;
   if (audio && audio.duration && t.playtime) {
-    const pct = audio.currentTime / audio.duration;
-    playheadX = pct * totalWidth;
+    playheadX = (audio.currentTime / audio.duration) * visWidth;
   }
-  const data = wf.data;
-  for (let i = 0; i < wf.len; i++) {
-    const mn = data[i * 2];
-    const mx = data[i * 2 + 1];
+  for (let x = 0; x < visWidth; x++) {
+    const startIdx = Math.floor((x / visWidth) * wf.len);
+    const endIdx = Math.floor(((x + 1) / visWidth) * wf.len);
+    let mn = 0, mx = 0;
+    for (let i = startIdx; i < endIdx; i++) {
+      if (data[i * 2] < mn) mn = data[i * 2];
+      if (data[i * 2 + 1] > mx) mx = data[i * 2 + 1];
+    }
     const y1 = halfH + mn * ampScale;
     const y2 = halfH + mx * ampScale;
-    ctx.fillStyle = playheadX >= 0 && i < playheadX ? '#6b88b0' : '#84a0c6';
-    ctx.fillRect(i, y1, 1, Math.max(1, y2 - y1));
+    ctx.fillStyle = playheadX >= 0 && x < playheadX ? '#6b88b0' : '#84a0c6';
+    ctx.fillRect(x, y1, 1, Math.max(1, y2 - y1));
   }
   if (playheadX >= 0) {
     ctx.strokeStyle = '#e27878';
@@ -653,8 +646,6 @@ function drawWaveform() {
     ctx.moveTo(playheadX, 2);
     ctx.lineTo(playheadX, h - 2);
     ctx.stroke();
-    const targetScroll = playheadX - visWidth / 2;
-    wrap.scrollLeft = Math.max(0, Math.min(targetScroll, totalWidth - visWidth));
   }
 }
 let tracks = [];