chart-preview 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # chart-preview
 
+## 1.0.2
+
+### Patch Changes
+
+- 5319db5: Refactor AudioManager to improve audio playback control and state management. Introduce independent paused state tracking, enhance audio source management, and streamline audio decoding process. Update ChartPreviewPlayer styles for better UI responsiveness and remove idle message.
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/index.js

@@ -330,11 +330,13 @@ var ChartRenderer = class extends THREE.WebGLRenderer {
   }
 };
 var AudioManager = class {
+  // Track paused state independently since we share the AudioContext
   constructor(audioFiles, startDelayMs, fallbackAudioLengthMs) {
     this.audioFiles = audioFiles;
     this.startDelayMs = startDelayMs;
     this.fallbackAudioLengthMs = fallbackAudioLengthMs;
     this.eventEmitter = new import_eventemitter3.EventEmitter();
+    this.audioBuffers = [];
     this.gainNode = null;
     this.audioSources = [];
     this._volume = 0.5;
@@ -343,6 +345,7 @@ var AudioManager = class {
     // Necessary because audioCtx.currentTime doesn't reset to 0 on seek
     this.audioLengthMs = 0;
     this.endEventTimeout = null;
+    this._isPaused = true;
     const ctx = getSharedAudioContext();
     if (!ctx) {
       throw new Error("AudioContext is not supported in this environment");
@@ -361,7 +364,7 @@ var AudioManager = class {
       startDelayMs,
       fallbackAudioLengthMs
     );
-    await audioManager.initAudio();
+    await audioManager.decodeAudioFiles();
     return audioManager;
   }
   /**
@@ -385,10 +388,12 @@ var AudioManager = class {
   }
   /** Nonnegative number of milliseconds representing time elapsed since the chart preview start. */
   get chartCurrentTimeMs() {
-    const isPaused = this.audioCtx.state === "suspended";
+    if (this._isPaused) {
+      return this.lastSeekChartTimeMs;
+    }
     const audioLatency = (this.audioCtx.baseLatency + (this.audioCtx.outputLatency || 0)) * 1e3;
     const audioTimeSinceLastSeekMs = (this.audioCtx.currentTime - this.lastAudioCtxCurrentTime) * 1e3;
-    return this.lastSeekChartTimeMs + audioTimeSinceLastSeekMs - (isPaused ? 0 : audioLatency);
+    return this.lastSeekChartTimeMs + audioTimeSinceLastSeekMs - audioLatency;
   }
   /** Nonnegative number of milliseconds representing when the audio ends (and when the chart preview ends). */
   get chartEndTimeMs() {
@@ -401,13 +406,12 @@ var AudioManager = class {
     );
   }
   async play() {
-    if (this.gainNode === null) {
-      await this.initAudio();
-    }
     if (this.audioCtx.state === "suspended") {
       await this.audioCtx.resume();
     }
-    if (this.audioSources.length === 0 && !this.endEventTimeout) {
+    this.startAudioSources();
+    this._isPaused = false;
+    if (this.audioBuffers.length === 0 && !this.endEventTimeout) {
       const remainingMs = this.chartEndTimeMs - this.chartCurrentTimeMs;
       if (remainingMs > 0) {
         this.endEventTimeout = setTimeout(() => {
@@ -417,20 +421,42 @@ var AudioManager = class {
     }
   }
   async pause() {
-    if (this.audioCtx.state === "running") {
-      await this.audioCtx.suspend();
-    }
+    const currentTime = this.chartCurrentTimeMs;
+    this._isPaused = true;
+    this.lastSeekChartTimeMs = currentTime;
+    this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
     if (this.endEventTimeout) {
       clearTimeout(this.endEventTimeout);
       this.endEventTimeout = null;
     }
+    this.stopAudioSources();
   }
   closeAudio() {
     this.eventEmitter.removeAllListeners();
+    this._isPaused = true;
     if (this.endEventTimeout) {
       clearTimeout(this.endEventTimeout);
       this.endEventTimeout = null;
     }
+    this.stopAudioSources();
+    unregisterInstance();
+  }
+  /**
+   * Decodes audio files into AudioBuffers. Called once during initialization.
+   */
+  async decodeAudioFiles() {
+    this.audioBuffers = await Promise.all(
+      this.audioFiles.map(
+        (file) => this.audioCtx.decodeAudioData(file.slice(0).buffer)
+      )
+    );
+    const calculatedLengthMs = this.audioBuffers.length > 0 ? Math.max(...this.audioBuffers.map((b) => b.duration)) * 1e3 : 0;
+    this.audioLengthMs = calculatedLengthMs > 0 ? calculatedLengthMs : this.fallbackAudioLengthMs;
+  }
+  /**
+   * Stops all currently playing audio sources for this instance.
+   */
+  stopAudioSources() {
     for (const source of this.audioSources) {
       source.onended = null;
       try {
@@ -442,32 +468,18 @@ var AudioManager = class {
     this.audioSources = [];
     this.gainNode?.disconnect();
     this.gainNode = null;
-    unregisterInstance();
   }
-  async initAudio() {
-    for (const source of this.audioSources) {
-      source.onended = null;
-      try {
-        source.stop();
-        source.disconnect();
-      } catch {
-      }
-    }
-    this.audioSources = [];
-    const audioBuffers = await Promise.all(
-      // Must be recreated on each seek because seek is not supported by the Web Audio API
-      this.audioFiles.map(
-        (file) => this.audioCtx.decodeAudioData(file.slice(0).buffer)
-      )
-    );
-    const calculatedLengthMs = audioBuffers.length > 0 ? Math.max(...audioBuffers.map((b) => b.duration)) * 1e3 : 0;
-    this.audioLengthMs = calculatedLengthMs > 0 ? calculatedLengthMs : this.fallbackAudioLengthMs;
+  /**
+   * Creates and starts audio sources from the current playback position.
+   */
+  startAudioSources() {
+    this.stopAudioSources();
     this.gainNode = this.audioCtx.createGain();
     this.gainNode.gain.value = this._volume;
     this.gainNode.connect(this.audioCtx.destination);
     let endedCount = 0;
     const audioStartOffsetSeconds = (this.lastSeekChartTimeMs - this.startDelayMs) / 1e3;
-    if (audioBuffers.length === 0) {
+    if (this.audioBuffers.length === 0) {
       if (this.endEventTimeout) {
         clearTimeout(this.endEventTimeout);
         this.endEventTimeout = null;
@@ -479,12 +491,12 @@ var AudioManager = class {
         }, remainingMs);
       }
     }
-    for (const audioBuffer of audioBuffers) {
+    for (const audioBuffer of this.audioBuffers) {
       const source = this.audioCtx.createBufferSource();
       source.buffer = audioBuffer;
       source.onended = () => {
         endedCount++;
-        if (endedCount === audioBuffers.length) {
+        if (endedCount === this.audioBuffers.length && !this._isPaused) {
           this.eventEmitter.emit("end");
         }
       };
@@ -496,33 +508,20 @@ var AudioManager = class {
       this.audioSources.push(source);
     }
     this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
-    this.pause();
   }
   /**
    * @param percentComplete The progress between the start and end of the preview.
    */
   async seek(percentComplete) {
-    if (this.audioCtx.state === "running") {
-      await this.audioCtx.suspend();
-    }
     if (this.endEventTimeout) {
       clearTimeout(this.endEventTimeout);
       this.endEventTimeout = null;
     }
-    for (const source of this.audioSources) {
-      source.onended = null;
-      try {
-        source.stop();
-        source.disconnect();
-      } catch {
-      }
-    }
-    this.audioSources = [];
-    this.gainNode?.disconnect();
-    this.gainNode = null;
+    this.stopAudioSources();
     const chartSeekTimeMs = percentComplete * this.chartEndTimeMs;
     this.lastSeekChartTimeMs = chartSeekTimeMs;
     this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
+    this._isPaused = true;
   }
 };
 var SilentAudioManager = class {
@@ -1269,7 +1268,6 @@ var STYLES = `
 	--accent-color: #3b82f6;
 	--text-color: #e0e0e0;
 	--text-muted: #aaa;
-	--text-idle: #666;
 	--error-color: #ef4444;
 	--shadow-color: rgba(0, 0, 0, 0.3);
 
@@ -1341,8 +1339,8 @@ var STYLES = `
 	align-items: center;
 	justify-content: center;
 	height: 40px;
-	width: 38px;
-	padding: 8px;
+	width: 32px;
+	padding: 6px;
 	transition: background 0.15s;
 	flex-shrink: 0;
 }
@@ -1427,10 +1425,10 @@ var STYLES = `
 .timestamp {
 	color: var(--text-muted);
 	font-size: 12px;
-	padding: 0 8px;
+	padding: 0 2px;
 	white-space: nowrap;
 	flex-shrink: 0;
-	min-width: 85px;
+	min-width: 70px;
 	text-align: center;
 }
 
@@ -1438,7 +1436,7 @@ var STYLES = `
 	flex: 1;
 	display: flex;
 	align-items: center;
-	padding: 0 8px;
+	padding: 0 4px;
 	min-width: 0;
 }
 
@@ -1480,11 +1478,6 @@ var STYLES = `
 	cursor: not-allowed;
 }
 
-.idle-message {
-	color: var(--text-idle);
-	font-size: 14px;
-}
-
 .error-message {
 	color: var(--error-color);
 	font-size: 14px;
@@ -1589,7 +1582,6 @@ var ChartPreviewPlayer = class extends HTMLElement {
 			<style>${STYLES}</style>
 			<div class="player-container">
 				<div class="preview-viewport">
-					<span class="idle-message">Click play to start</span>
 				</div>
 				<div class="controls">
 					<button class="control-btn play-btn" aria-label="Play" disabled>
@@ -1707,9 +1699,6 @@ var ChartPreviewPlayer = class extends HTMLElement {
    */
   prepareForLoading() {
     this.setState("loading");
-    const idleMessage = this.viewport.querySelector(".idle-message");
-    if (idleMessage)
-      idleMessage.remove();
     const errorMessage = this.viewport.querySelector(".error-message");
     if (errorMessage)
       errorMessage.remove();
@@ -1752,7 +1741,7 @@ var ChartPreviewPlayer = class extends HTMLElement {
   updatePlayButton() {
     switch (this._state) {
       case "idle":
-        this.playBtn.disabled = true;
+        this.playBtn.disabled = false;
         this.playBtn.innerHTML = ICONS.play;
         this.playBtn.setAttribute("aria-label", "Play");
         break;

package/dist/index.mjs

@@ -291,11 +291,13 @@ var ChartRenderer = class extends THREE.WebGLRenderer {
   }
 };
 var AudioManager = class {
+  // Track paused state independently since we share the AudioContext
   constructor(audioFiles, startDelayMs, fallbackAudioLengthMs) {
     this.audioFiles = audioFiles;
     this.startDelayMs = startDelayMs;
     this.fallbackAudioLengthMs = fallbackAudioLengthMs;
     this.eventEmitter = new EventEmitter();
+    this.audioBuffers = [];
     this.gainNode = null;
     this.audioSources = [];
     this._volume = 0.5;
@@ -304,6 +306,7 @@ var AudioManager = class {
     // Necessary because audioCtx.currentTime doesn't reset to 0 on seek
     this.audioLengthMs = 0;
     this.endEventTimeout = null;
+    this._isPaused = true;
     const ctx = getSharedAudioContext();
     if (!ctx) {
       throw new Error("AudioContext is not supported in this environment");
@@ -322,7 +325,7 @@ var AudioManager = class {
       startDelayMs,
       fallbackAudioLengthMs
     );
-    await audioManager.initAudio();
+    await audioManager.decodeAudioFiles();
     return audioManager;
   }
   /**
@@ -346,10 +349,12 @@ var AudioManager = class {
   }
   /** Nonnegative number of milliseconds representing time elapsed since the chart preview start. */
   get chartCurrentTimeMs() {
-    const isPaused = this.audioCtx.state === "suspended";
+    if (this._isPaused) {
+      return this.lastSeekChartTimeMs;
+    }
     const audioLatency = (this.audioCtx.baseLatency + (this.audioCtx.outputLatency || 0)) * 1e3;
     const audioTimeSinceLastSeekMs = (this.audioCtx.currentTime - this.lastAudioCtxCurrentTime) * 1e3;
-    return this.lastSeekChartTimeMs + audioTimeSinceLastSeekMs - (isPaused ? 0 : audioLatency);
+    return this.lastSeekChartTimeMs + audioTimeSinceLastSeekMs - audioLatency;
   }
   /** Nonnegative number of milliseconds representing when the audio ends (and when the chart preview ends). */
   get chartEndTimeMs() {
@@ -362,13 +367,12 @@ var AudioManager = class {
     );
   }
   async play() {
-    if (this.gainNode === null) {
-      await this.initAudio();
-    }
     if (this.audioCtx.state === "suspended") {
       await this.audioCtx.resume();
     }
-    if (this.audioSources.length === 0 && !this.endEventTimeout) {
+    this.startAudioSources();
+    this._isPaused = false;
+    if (this.audioBuffers.length === 0 && !this.endEventTimeout) {
       const remainingMs = this.chartEndTimeMs - this.chartCurrentTimeMs;
       if (remainingMs > 0) {
         this.endEventTimeout = setTimeout(() => {
@@ -378,20 +382,42 @@ var AudioManager = class {
     }
   }
   async pause() {
-    if (this.audioCtx.state === "running") {
-      await this.audioCtx.suspend();
-    }
+    const currentTime = this.chartCurrentTimeMs;
+    this._isPaused = true;
+    this.lastSeekChartTimeMs = currentTime;
+    this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
     if (this.endEventTimeout) {
       clearTimeout(this.endEventTimeout);
       this.endEventTimeout = null;
     }
+    this.stopAudioSources();
   }
   closeAudio() {
     this.eventEmitter.removeAllListeners();
+    this._isPaused = true;
     if (this.endEventTimeout) {
       clearTimeout(this.endEventTimeout);
       this.endEventTimeout = null;
     }
+    this.stopAudioSources();
+    unregisterInstance();
+  }
+  /**
+   * Decodes audio files into AudioBuffers. Called once during initialization.
+   */
+  async decodeAudioFiles() {
+    this.audioBuffers = await Promise.all(
+      this.audioFiles.map(
+        (file) => this.audioCtx.decodeAudioData(file.slice(0).buffer)
+      )
+    );
+    const calculatedLengthMs = this.audioBuffers.length > 0 ? Math.max(...this.audioBuffers.map((b) => b.duration)) * 1e3 : 0;
+    this.audioLengthMs = calculatedLengthMs > 0 ? calculatedLengthMs : this.fallbackAudioLengthMs;
+  }
+  /**
+   * Stops all currently playing audio sources for this instance.
+   */
+  stopAudioSources() {
     for (const source of this.audioSources) {
       source.onended = null;
       try {
@@ -403,32 +429,18 @@ var AudioManager = class {
     this.audioSources = [];
     this.gainNode?.disconnect();
     this.gainNode = null;
-    unregisterInstance();
   }
-  async initAudio() {
-    for (const source of this.audioSources) {
-      source.onended = null;
-      try {
-        source.stop();
-        source.disconnect();
-      } catch {
-      }
-    }
-    this.audioSources = [];
-    const audioBuffers = await Promise.all(
-      // Must be recreated on each seek because seek is not supported by the Web Audio API
-      this.audioFiles.map(
-        (file) => this.audioCtx.decodeAudioData(file.slice(0).buffer)
-      )
-    );
-    const calculatedLengthMs = audioBuffers.length > 0 ? Math.max(...audioBuffers.map((b) => b.duration)) * 1e3 : 0;
-    this.audioLengthMs = calculatedLengthMs > 0 ? calculatedLengthMs : this.fallbackAudioLengthMs;
+  /**
+   * Creates and starts audio sources from the current playback position.
+   */
+  startAudioSources() {
+    this.stopAudioSources();
     this.gainNode = this.audioCtx.createGain();
     this.gainNode.gain.value = this._volume;
     this.gainNode.connect(this.audioCtx.destination);
     let endedCount = 0;
     const audioStartOffsetSeconds = (this.lastSeekChartTimeMs - this.startDelayMs) / 1e3;
-    if (audioBuffers.length === 0) {
+    if (this.audioBuffers.length === 0) {
       if (this.endEventTimeout) {
         clearTimeout(this.endEventTimeout);
         this.endEventTimeout = null;
@@ -440,12 +452,12 @@ var AudioManager = class {
         }, remainingMs);
       }
     }
-    for (const audioBuffer of audioBuffers) {
+    for (const audioBuffer of this.audioBuffers) {
       const source = this.audioCtx.createBufferSource();
       source.buffer = audioBuffer;
       source.onended = () => {
         endedCount++;
-        if (endedCount === audioBuffers.length) {
+        if (endedCount === this.audioBuffers.length && !this._isPaused) {
           this.eventEmitter.emit("end");
         }
       };
@@ -457,33 +469,20 @@ var AudioManager = class {
       this.audioSources.push(source);
     }
     this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
-    this.pause();
   }
   /**
    * @param percentComplete The progress between the start and end of the preview.
    */
   async seek(percentComplete) {
-    if (this.audioCtx.state === "running") {
-      await this.audioCtx.suspend();
-    }
     if (this.endEventTimeout) {
       clearTimeout(this.endEventTimeout);
       this.endEventTimeout = null;
     }
-    for (const source of this.audioSources) {
-      source.onended = null;
-      try {
-        source.stop();
-        source.disconnect();
-      } catch {
-      }
-    }
-    this.audioSources = [];
-    this.gainNode?.disconnect();
-    this.gainNode = null;
+    this.stopAudioSources();
     const chartSeekTimeMs = percentComplete * this.chartEndTimeMs;
     this.lastSeekChartTimeMs = chartSeekTimeMs;
     this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
+    this._isPaused = true;
   }
 };
 var SilentAudioManager = class {
@@ -1234,7 +1233,6 @@ var STYLES = `
 	--accent-color: #3b82f6;
 	--text-color: #e0e0e0;
 	--text-muted: #aaa;
-	--text-idle: #666;
 	--error-color: #ef4444;
 	--shadow-color: rgba(0, 0, 0, 0.3);
 
@@ -1306,8 +1304,8 @@ var STYLES = `
 	align-items: center;
 	justify-content: center;
 	height: 40px;
-	width: 38px;
-	padding: 8px;
+	width: 32px;
+	padding: 6px;
 	transition: background 0.15s;
 	flex-shrink: 0;
 }
@@ -1392,10 +1390,10 @@ var STYLES = `
 .timestamp {
 	color: var(--text-muted);
 	font-size: 12px;
-	padding: 0 8px;
+	padding: 0 2px;
 	white-space: nowrap;
 	flex-shrink: 0;
-	min-width: 85px;
+	min-width: 70px;
 	text-align: center;
 }
 
@@ -1403,7 +1401,7 @@ var STYLES = `
 	flex: 1;
 	display: flex;
 	align-items: center;
-	padding: 0 8px;
+	padding: 0 4px;
 	min-width: 0;
 }
 
@@ -1445,11 +1443,6 @@ var STYLES = `
 	cursor: not-allowed;
 }
 
-.idle-message {
-	color: var(--text-idle);
-	font-size: 14px;
-}
-
 .error-message {
 	color: var(--error-color);
 	font-size: 14px;
@@ -1554,7 +1547,6 @@ var ChartPreviewPlayer = class extends HTMLElement {
 			<style>${STYLES}</style>
 			<div class="player-container">
 				<div class="preview-viewport">
-					<span class="idle-message">Click play to start</span>
 				</div>
 				<div class="controls">
 					<button class="control-btn play-btn" aria-label="Play" disabled>
@@ -1672,9 +1664,6 @@ var ChartPreviewPlayer = class extends HTMLElement {
    */
   prepareForLoading() {
     this.setState("loading");
-    const idleMessage = this.viewport.querySelector(".idle-message");
-    if (idleMessage)
-      idleMessage.remove();
     const errorMessage = this.viewport.querySelector(".error-message");
     if (errorMessage)
       errorMessage.remove();
@@ -1717,7 +1706,7 @@ var ChartPreviewPlayer = class extends HTMLElement {
   updatePlayButton() {
     switch (this._state) {
       case "idle":
-        this.playBtn.disabled = true;
+        this.playBtn.disabled = false;
         this.playBtn.innerHTML = ICONS.play;
         this.playBtn.setAttribute("aria-label", "Play");
         break;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chart-preview",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"author": "Geo",
 	"license": "MIT",
 	"main": "dist/index.js",

package/src/ChartPreview.ts

@@ -387,6 +387,7 @@ class AudioManager {
   private eventEmitter = new EventEmitter();
 
   private audioCtx: AudioContext;
+  private audioBuffers: AudioBuffer[] = [];
   private gainNode: GainNode | null = null;
   private audioSources: AudioBufferSourceNode[] = [];
   private _volume = 0.5;
@@ -394,6 +395,7 @@ class AudioManager {
   private lastAudioCtxCurrentTime = 0; // Necessary because audioCtx.currentTime doesn't reset to 0 on seek
   private audioLengthMs: number = 0;
   private endEventTimeout: ReturnType<typeof setTimeout> | null = null;
+  private _isPaused = true; // Track paused state independently since we share the AudioContext
 
   private constructor(
     private audioFiles: Uint8Array[],
@@ -423,7 +425,7 @@ class AudioManager {
       startDelayMs,
       fallbackAudioLengthMs
     );
-    await audioManager.initAudio();
+    await audioManager.decodeAudioFiles();
     return audioManager;
   }
 
@@ -453,20 +455,17 @@ class AudioManager {
 
   /** Nonnegative number of milliseconds representing time elapsed since the chart preview start. */
   get chartCurrentTimeMs() {
-    const isPaused = this.audioCtx.state === "suspended";
+    // Use our own paused state since we share the AudioContext with other instances
+    // and can't rely on audioCtx.state to determine this instance's state
+    if (this._isPaused) {
+      return this.lastSeekChartTimeMs;
+    }
     // outputLatency is not implemented in safari
     const audioLatency =
       (this.audioCtx.baseLatency + (this.audioCtx.outputLatency || 0)) * 1000;
     const audioTimeSinceLastSeekMs =
       (this.audioCtx.currentTime - this.lastAudioCtxCurrentTime) * 1000;
-    // Note: when paused, the queued audio during the latency period is skipped and never heard.
-    // The solution here is to represent that visually by jumping ahead slightly by ignoring latency when paused.
-    // If this is a more significant problem, it can be fixed by seeking backward by `audioLatency`.
-    return (
-      this.lastSeekChartTimeMs +
-      audioTimeSinceLastSeekMs -
-      (isPaused ? 0 : audioLatency)
-    );
+    return this.lastSeekChartTimeMs + audioTimeSinceLastSeekMs - audioLatency;
   }
 
   /** Nonnegative number of milliseconds representing when the audio ends (and when the chart preview ends). */
@@ -484,16 +483,17 @@ class AudioManager {
   }
 
   async play() {
-    // Reinitialize audio if needed (e.g., after seeking)
-    if (this.gainNode === null) {
-      await this.initAudio();
-    }
-    // Resume context if suspended
+    // Resume the shared context if suspended (needed for initial user interaction)
     if (this.audioCtx.state === "suspended") {
       await this.audioCtx.resume();
     }
-    // Restart end event timeout for charts without audio
-    if (this.audioSources.length === 0 && !this.endEventTimeout) {
+
+    // Start audio playback
+    this.startAudioSources();
+    this._isPaused = false;
+
+    // Start end event timeout for charts without audio
+    if (this.audioBuffers.length === 0 && !this.endEventTimeout) {
       const remainingMs = this.chartEndTimeMs - this.chartCurrentTimeMs;
       if (remainingMs > 0) {
         this.endEventTimeout = setTimeout(() => {
@@ -502,58 +502,44 @@ class AudioManager {
       }
     }
   }
+
   async pause() {
-    if (this.audioCtx.state === "running") {
-      await this.audioCtx.suspend();
-    }
+    // Record current playback position before stopping
+    const currentTime = this.chartCurrentTimeMs;
+    this._isPaused = true;
+    this.lastSeekChartTimeMs = currentTime;
+    this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
+
     // Clear end event timeout when pausing
     if (this.endEventTimeout) {
       clearTimeout(this.endEventTimeout);
       this.endEventTimeout = null;
     }
+
+    // Stop all audio sources for this instance only
+    // (Don't suspend the shared AudioContext - other instances may be playing)
+    this.stopAudioSources();
   }
 
   closeAudio() {
     this.eventEmitter.removeAllListeners();
+    this._isPaused = true;
     // Clear end event timeout
     if (this.endEventTimeout) {
       clearTimeout(this.endEventTimeout);
       this.endEventTimeout = null;
     }
     // Stop all audio sources
-    for (const source of this.audioSources) {
-      // Remove onended handler before stopping to prevent false "end" events
-      source.onended = null;
-      try {
-        source.stop();
-        source.disconnect();
-      } catch {
-        // Source may already be stopped
-      }
-    }
-    this.audioSources = [];
-    this.gainNode?.disconnect();
-    this.gainNode = null;
+    this.stopAudioSources();
     // Don't close the shared context - just unregister this instance
     unregisterInstance();
   }
 
-  async initAudio() {
-    // Stop any existing sources before creating new ones
-    for (const source of this.audioSources) {
-      // Remove onended handler before stopping to prevent false "end" events
-      source.onended = null;
-      try {
-        source.stop();
-        source.disconnect();
-      } catch {
-        // Source may already be stopped
-      }
-    }
-    this.audioSources = [];
-
-    const audioBuffers = await Promise.all(
-      // Must be recreated on each seek because seek is not supported by the Web Audio API
+  /**
+   * Decodes audio files into AudioBuffers. Called once during initialization.
+   */
+  private async decodeAudioFiles() {
+    this.audioBuffers = await Promise.all(
       this.audioFiles.map((file) =>
         this.audioCtx.decodeAudioData(file.slice(0).buffer)
       )
@@ -561,11 +547,37 @@ class AudioManager {
 
     // Use fallback if no audio files or if calculated duration is invalid
     const calculatedLengthMs =
-      audioBuffers.length > 0
-        ? Math.max(...audioBuffers.map((b) => b.duration)) * 1000
+      this.audioBuffers.length > 0
+        ? Math.max(...this.audioBuffers.map((b) => b.duration)) * 1000
         : 0;
     this.audioLengthMs =
       calculatedLengthMs > 0 ? calculatedLengthMs : this.fallbackAudioLengthMs;
+  }
+
+  /**
+   * Stops all currently playing audio sources for this instance.
+   */
+  private stopAudioSources() {
+    for (const source of this.audioSources) {
+      source.onended = null; // Prevent false "end" events
+      try {
+        source.stop();
+        source.disconnect();
+      } catch {
+        // Source may already be stopped
+      }
+    }
+    this.audioSources = [];
+    this.gainNode?.disconnect();
+    this.gainNode = null;
+  }
+
+  /**
+   * Creates and starts audio sources from the current playback position.
+   */
+  private startAudioSources() {
+    // Stop any existing sources before creating new ones
+    this.stopAudioSources();
 
     this.gainNode = this.audioCtx.createGain();
     this.gainNode.gain.value = this._volume;
@@ -575,8 +587,8 @@ class AudioManager {
     const audioStartOffsetSeconds =
       (this.lastSeekChartTimeMs - this.startDelayMs) / 1000;
 
-    // If no audio files, use a timeout to emit "end" event like SilentAudioManager does
-    if (audioBuffers.length === 0) {
+    // If no audio files, use a timeout to emit "end" event
+    if (this.audioBuffers.length === 0) {
       // Clear any existing timeout
       if (this.endEventTimeout) {
         clearTimeout(this.endEventTimeout);
@@ -591,12 +603,12 @@ class AudioManager {
       }
     }
 
-    for (const audioBuffer of audioBuffers) {
+    for (const audioBuffer of this.audioBuffers) {
       const source = this.audioCtx.createBufferSource();
       source.buffer = audioBuffer;
       source.onended = () => {
         endedCount++;
-        if (endedCount === audioBuffers.length) {
+        if (endedCount === this.audioBuffers.length && !this._isPaused) {
           this.eventEmitter.emit("end");
         }
       };
@@ -614,19 +626,12 @@ class AudioManager {
       this.audioSources.push(source);
     }
     this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
-    this.pause();
   }
 
   /**
    * @param percentComplete The progress between the start and end of the preview.
    */
   async seek(percentComplete: number) {
-    // Suspend context first to prevent time drift during seek
-    // (chartCurrentTimeMs is calculated from audioCtx.currentTime)
-    if (this.audioCtx.state === "running") {
-      await this.audioCtx.suspend();
-    }
-
     // Clear end event timeout when seeking
     if (this.endEventTimeout) {
       clearTimeout(this.endEventTimeout);
@@ -634,22 +639,12 @@ class AudioManager {
     }
 
     // Stop existing audio sources
-    for (const source of this.audioSources) {
-      // Remove onended handler before stopping to prevent false "end" events
-      source.onended = null;
-      try {
-        source.stop();
-        source.disconnect();
-      } catch {
-        // Source may already be stopped
-      }
-    }
-    this.audioSources = [];
-    this.gainNode?.disconnect();
-    this.gainNode = null;
+    this.stopAudioSources();
+
     const chartSeekTimeMs = percentComplete * this.chartEndTimeMs;
     this.lastSeekChartTimeMs = chartSeekTimeMs;
     this.lastAudioCtxCurrentTime = this.audioCtx.currentTime;
+    this._isPaused = true;
   }
 }
 

package/src/ChartPreviewPlayer.ts

@@ -57,7 +57,6 @@ const STYLES = `
 	--accent-color: #3b82f6;
 	--text-color: #e0e0e0;
 	--text-muted: #aaa;
-	--text-idle: #666;
 	--error-color: #ef4444;
 	--shadow-color: rgba(0, 0, 0, 0.3);
 
@@ -129,8 +128,8 @@ const STYLES = `
 	align-items: center;
 	justify-content: center;
 	height: 40px;
-	width: 38px;
-	padding: 8px;
+	width: 32px;
+	padding: 6px;
 	transition: background 0.15s;
 	flex-shrink: 0;
 }
@@ -215,10 +214,10 @@ const STYLES = `
 .timestamp {
 	color: var(--text-muted);
 	font-size: 12px;
-	padding: 0 8px;
+	padding: 0 2px;
 	white-space: nowrap;
 	flex-shrink: 0;
-	min-width: 85px;
+	min-width: 70px;
 	text-align: center;
 }
 
@@ -226,7 +225,7 @@ const STYLES = `
 	flex: 1;
 	display: flex;
 	align-items: center;
-	padding: 0 8px;
+	padding: 0 4px;
 	min-width: 0;
 }
 
@@ -268,11 +267,6 @@ const STYLES = `
 	cursor: not-allowed;
 }
 
-.idle-message {
-	color: var(--text-idle);
-	font-size: 14px;
-}
-
 .error-message {
 	color: var(--error-color);
 	font-size: 14px;
@@ -379,7 +373,6 @@ export class ChartPreviewPlayer extends HTMLElement {
 			<style>${STYLES}</style>
 			<div class="player-container">
 				<div class="preview-viewport">
-					<span class="idle-message">Click play to start</span>
 				</div>
 				<div class="controls">
 					<button class="control-btn play-btn" aria-label="Play" disabled>
@@ -587,10 +580,6 @@ export class ChartPreviewPlayer extends HTMLElement {
   private prepareForLoading(): void {
     this.setState("loading");
 
-    // Remove idle message
-    const idleMessage = this.viewport.querySelector(".idle-message");
-    if (idleMessage) idleMessage.remove();
-
     // Remove error message if present
     const errorMessage = this.viewport.querySelector(".error-message");
     if (errorMessage) errorMessage.remove();
@@ -644,7 +633,7 @@ export class ChartPreviewPlayer extends HTMLElement {
   private updatePlayButton() {
     switch (this._state) {
       case "idle":
-        this.playBtn.disabled = true;
+        this.playBtn.disabled = false;
         this.playBtn.innerHTML = ICONS.play;
         this.playBtn.setAttribute("aria-label", "Play");
         break;