diff --git a/index.html b/index.html
index 5dba1e6..738b7f1 100644
--- a/index.html
+++ b/index.html
@@ -676,13 +676,13 @@ function drawWaveform() {
   ctx.clearRect(0, 0, visWidth, h);
   if (!t) return;
   if (!t.waveform) {
+    const barH = 4, y = (h - barH) / 2;
+    ctx.fillStyle = '#272c42';
+    ctx.beginPath();
+    ctx.roundRect(0, y, visWidth, barH, 2);
+    ctx.fill();
     if (audio && audio.duration) {
       const pct = audio.currentTime / audio.duration;
-      const barH = 4, y = (h - barH) / 2;
-      ctx.fillStyle = '#272c42';
-      ctx.beginPath();
-      ctx.roundRect(0, y, visWidth, barH, 2);
-      ctx.fill();
       ctx.fillStyle = '#84a0c6';
       ctx.beginPath();
       ctx.roundRect(0, y, visWidth * pct, barH, 2);
@@ -1562,6 +1562,7 @@ function onLoadedmetadata(e) {
   if (t && audio.duration) {
     t.playtime = audio.duration;
     renderTracks();
+    drawWaveform();
     computeWaveform(t);
   }
 }