@wq-hook/volcano-react 1.0.3 → 1.0.5

package/dist/index.d.mts

@@ -420,6 +420,7 @@ interface PlaybackSessionConfig {
     onPlayResume?: () => void;
     onPlayEnd?: () => void;
     onError?: (error: Error) => void;
+    onSessionEnd?: (id: string) => void;
 }
 /**
  * 播放会话控制器
@@ -447,6 +448,9 @@ declare class PlaybackSession {
     private resolveAllSegmentsSent;
     private animId;
     private lastVisUpdate;
+    private pausedTime;
+    private cachedAudioData;
+    private isStopping;
     constructor(id: string, config: PlaybackSessionConfig);
     /**
      * 初始化 AudioContext（用于可视化）
@@ -471,7 +475,7 @@ declare class PlaybackSession {
     play(text: string): Promise<void>;
     private processQueue;
     pause(): void;
-    resume(): void;
+    resume(): Promise<void>;
     stop(): void;
     seek(percentage: number): void;
     private updateState;
@@ -481,6 +485,11 @@ declare class PlaybackSession {
     private getTimeDomainData;
     private startVisualizationLoop;
     private stopVisualizationLoop;
+    /**
+     * 释放 Blob URL 资源
+     * 在暂停、停止、播放完毕时调用，避免 Blob URL 长期占用内存和过期问题
+     */
+    private releaseBlobUrl;
 }
 /**
  * 流式播放管理器（单例）

package/dist/index.d.ts

@@ -420,6 +420,7 @@ interface PlaybackSessionConfig {
     onPlayResume?: () => void;
     onPlayEnd?: () => void;
     onError?: (error: Error) => void;
+    onSessionEnd?: (id: string) => void;
 }
 /**
  * 播放会话控制器
@@ -447,6 +448,9 @@ declare class PlaybackSession {
     private resolveAllSegmentsSent;
     private animId;
     private lastVisUpdate;
+    private pausedTime;
+    private cachedAudioData;
+    private isStopping;
     constructor(id: string, config: PlaybackSessionConfig);
     /**
      * 初始化 AudioContext（用于可视化）
@@ -471,7 +475,7 @@ declare class PlaybackSession {
     play(text: string): Promise<void>;
     private processQueue;
     pause(): void;
-    resume(): void;
+    resume(): Promise<void>;
     stop(): void;
     seek(percentage: number): void;
     private updateState;
@@ -481,6 +485,11 @@ declare class PlaybackSession {
     private getTimeDomainData;
     private startVisualizationLoop;
     private stopVisualizationLoop;
+    /**
+     * 释放 Blob URL 资源
+     * 在暂停、停止、播放完毕时调用，避免 Blob URL 长期占用内存和过期问题
+     */
+    private releaseBlobUrl;
 }
 /**
  * 流式播放管理器（单例）

package/dist/index.js

@@ -770,6 +770,7 @@ function buildFullUrl2(url, params) {
   return `${url}?${arr.join("&")}`;
 }
 var PlaybackSession = class {
+  // 标记是否正在停止，用于区分 stop() 和 pause()
   constructor(id, config) {
     this.listeners = /* @__PURE__ */ new Set();
     this.audioContext = null;
@@ -790,6 +791,12 @@ var PlaybackSession = class {
     this.resolveAllSegmentsSent = null;
     this.animId = null;
     this.lastVisUpdate = 0;
+    // Blob URL 管理状态
+    this.pausedTime = 0;
+    // 记录暂停时的播放位置
+    this.cachedAudioData = null;
+    // 缓存音频数据，用于恢复时重新创建 Blob URL
+    this.isStopping = false;
     this.id = id;
     this.config = config;
     this.state = {
@@ -842,6 +849,7 @@ var PlaybackSession = class {
       this.startVisualizationLoop();
     };
     this.audio.onpause = () => {
+      if (this.isStopping) return;
       this.updateState({ isPaused: true, isPlaying: false });
       this.config.onPlayPause?.();
     };
@@ -850,14 +858,45 @@ var PlaybackSession = class {
         isPlaying: false,
         isPaused: false,
         isSynthesizing: false,
-        progress: 100
+        progress: 0,
+        visualizationData: {
+          frequencyData: new Uint8Array(0),
+          timeDomainData: new Uint8Array(0)
+        }
       });
       this.config.onPlayEnd?.();
+      this.releaseBlobUrl();
+      this.pausedTime = 0;
       this.stopVisualizationLoop();
+      this.config.onSessionEnd?.(this.id);
     };
-    this.audio.onerror = (e) => {
+    this.audio.onerror = async (e) => {
       const msg = this.audio.error?.message || "Audio playback error";
+      if (msg.includes("Empty src") || msg.includes("empty src")) {
+        console.log("[PlaybackSession] Ignoring empty src error during transition");
+        return;
+      }
       console.error("[PlaybackSession] Audio error:", msg);
+      const isBlobUrlExpired = msg.includes("ERR_FILE_NOT_FOUND") || msg.includes("PIPELINE_ERROR_READ") || msg.includes("MEDIA_ELEMENT_ERROR") || this.audio.error?.code === MediaError.MEDIA_ERR_NETWORK || this.audio.error?.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED;
+      if (isBlobUrlExpired && this.cachedAudioData) {
+        console.warn(
+          "[PlaybackSession] Blob URL expired, attempting to recreate from cache"
+        );
+        this.releaseBlobUrl();
+        const blob = new Blob(this.cachedAudioData, { type: "audio/mpeg" });
+        this.audioUrl = URL.createObjectURL(blob);
+        this.audio.src = this.audioUrl;
+        const resumeTime = this.pausedTime || 0;
+        try {
+          await this.audio.play();
+          if (resumeTime > 0) {
+            this.audio.currentTime = resumeTime;
+          }
+          return;
+        } catch (playErr) {
+          console.error("[PlaybackSession] Failed to replay from cache:", playErr);
+        }
+      }
       this.updateState({ error: msg });
       this.config.onError?.(new Error(msg));
     };
@@ -977,6 +1016,9 @@ var PlaybackSession = class {
               isSynthesizing: false,
               isSessionStarted: false
             });
+            if (this.sessionAudioBuffers.length > 0) {
+              this.cachedAudioData = [...this.sessionAudioBuffers];
+            }
             if (this.sessionAudioBuffers.length > 0 && this.streamText) {
               const speed = audioParams?.speech_rate || 0;
               const cacheKey = TTSCache.generateKey(
@@ -1081,11 +1123,12 @@ var PlaybackSession = class {
     const cacheKey = TTSCache.generateKey(formattedText, voice, speed);
     const cachedData = await TTSCache.get(cacheKey);
     if (cachedData && cachedData.length > 0) {
+      this.cachedAudioData = cachedData;
+      this.releaseBlobUrl();
       const blob = new Blob(cachedData, { type: "audio/mpeg" });
-      const url = URL.createObjectURL(blob);
-      if (this.audioUrl) URL.revokeObjectURL(this.audioUrl);
-      this.audioUrl = url;
-      this.audio.src = url;
+      this.audioUrl = URL.createObjectURL(blob);
+      this.audio.src = this.audioUrl;
+      this.pausedTime = 0;
       this.updateState({ isSynthesizing: false });
       if (this.config.autoPlay !== false) {
         try {
@@ -1138,24 +1181,52 @@ var PlaybackSession = class {
     setTimeout(() => this.processQueue(), 0);
   }
   pause() {
+    if (this.isStopping) return;
+    this.pausedTime = this.audio.currentTime;
     this.audio.pause();
+    this.releaseBlobUrl();
     this.updateState({ isPaused: true, isPlaying: false });
   }
-  resume() {
-    this.audio.play();
+  async resume() {
+    if (!this.audioUrl && this.cachedAudioData) {
+      const blob = new Blob(this.cachedAudioData, { type: "audio/mpeg" });
+      this.audioUrl = URL.createObjectURL(blob);
+      this.audio.src = this.audioUrl;
+      await new Promise((resolve, reject) => {
+        const onLoaded = () => {
+          resolve();
+          this.audio.removeEventListener("loadedmetadata", onLoaded);
+          this.audio.removeEventListener("error", onError);
+        };
+        const onError = () => {
+          reject(new Error("Failed to load audio"));
+          this.audio.removeEventListener("loadedmetadata", onLoaded);
+          this.audio.removeEventListener("error", onError);
+        };
+        this.audio.addEventListener("loadedmetadata", onLoaded);
+        this.audio.addEventListener("error", onError);
+        setTimeout(() => {
+          this.audio.removeEventListener("loadedmetadata", onLoaded);
+          this.audio.removeEventListener("error", onError);
+          resolve();
+        }, 3e3);
+      });
+      this.audio.currentTime = this.pausedTime;
+    }
+    await this.audio.play();
     this.updateState({ isPaused: false, isPlaying: true });
   }
   stop() {
+    this.isStopping = true;
     if (this.client) {
       this.client.close();
       this.client = null;
     }
     this.audio.pause();
     this.audio.currentTime = 0;
-    if (this.audioUrl) {
-      URL.revokeObjectURL(this.audioUrl);
-      this.audioUrl = null;
-    }
+    this.releaseBlobUrl();
+    this.cachedAudioData = null;
+    this.pausedTime = 0;
     this.stopVisualizationLoop();
     this.audioContext?.close();
     this.audioContext = null;
@@ -1165,8 +1236,14 @@ var PlaybackSession = class {
       isSynthesizing: false,
       progress: 0,
       isConnected: false,
-      isSessionStarted: false
+      isSessionStarted: false,
+      // 清除可视化数据
+      visualizationData: {
+        frequencyData: new Uint8Array(0),
+        timeDomainData: new Uint8Array(0)
+      }
     });
+    this.isStopping = false;
   }
   seek(percentage) {
     let duration = this.audio.duration;
@@ -1230,6 +1307,18 @@ var PlaybackSession = class {
       this.animId = null;
     }
   }
+  /**
+   * 释放 Blob URL 资源
+   * 在暂停、停止、播放完毕时调用，避免 Blob URL 长期占用内存和过期问题
+   */
+  releaseBlobUrl() {
+    if (this.audioUrl) {
+      URL.revokeObjectURL(this.audioUrl);
+      this.audioUrl = null;
+    }
+    this.audio.src = "";
+    this.audio.load();
+  }
 };
 var StreamPlaybackManagerImpl = class {
   constructor() {
@@ -1241,9 +1330,28 @@ var StreamPlaybackManagerImpl = class {
    */
   createSession(id, config) {
     if (this.activeStreamId && this.activeStreamId !== id) {
-      this.pause(this.activeStreamId);
+      const activeSession = this.sessions.get(this.activeStreamId);
+      if (activeSession) {
+        const isPlaying = activeSession.state.isPlaying;
+        const isPaused = activeSession.state.isPaused;
+        console.log(`[StreamPlaybackManager] Checking active session ${this.activeStreamId}: isPlaying=${isPlaying}, isPaused=${isPaused}`);
+        if (isPlaying || isPaused) {
+          console.log(`[StreamPlaybackManager] Pausing active session ${this.activeStreamId}`);
+          this.pause(this.activeStreamId);
+        } else {
+          console.log(`[StreamPlaybackManager] Active session ${this.activeStreamId} is not playing/paused, skipping pause`);
+        }
+      }
     }
-    const session = new PlaybackSession(id, config);
+    const session = new PlaybackSession(id, {
+      ...config,
+      onSessionEnd: (sessionId) => {
+        if (this.activeStreamId === sessionId) {
+          this.activeStreamId = null;
+        }
+        config.onSessionEnd?.(sessionId);
+      }
+    });
     this.sessions.set(id, session);
     this.activeStreamId = id;
     return session;
@@ -1781,9 +1889,10 @@ var AudioWaveVisualizer = ({
     ctx.strokeStyle = fillStyle;
     if (style === "bar" && frequencyData) {
       const barWidth = w / bars;
-      const step = Math.floor(frequencyData.length / bars);
       for (let i = 0; i < bars; i++) {
-        const value = frequencyData[i * step] || 0;
+        const halfLength = frequencyData.length / 2;
+        const index = Math.floor(i / bars * halfLength);
+        const value = frequencyData[index] || 0;
         const percent = value / 255;
         const barHeight = h * percent;
         ctx.fillRect(i * barWidth, h - barHeight, barWidth - 2, barHeight);

package/dist/index.mjs

@@ -726,6 +726,7 @@ function buildFullUrl2(url, params) {
   return `${url}?${arr.join("&")}`;
 }
 var PlaybackSession = class {
+  // 标记是否正在停止，用于区分 stop() 和 pause()
   constructor(id, config) {
     this.listeners = /* @__PURE__ */ new Set();
     this.audioContext = null;
@@ -746,6 +747,12 @@ var PlaybackSession = class {
     this.resolveAllSegmentsSent = null;
     this.animId = null;
     this.lastVisUpdate = 0;
+    // Blob URL 管理状态
+    this.pausedTime = 0;
+    // 记录暂停时的播放位置
+    this.cachedAudioData = null;
+    // 缓存音频数据，用于恢复时重新创建 Blob URL
+    this.isStopping = false;
     this.id = id;
     this.config = config;
     this.state = {
@@ -798,6 +805,7 @@ var PlaybackSession = class {
       this.startVisualizationLoop();
     };
     this.audio.onpause = () => {
+      if (this.isStopping) return;
       this.updateState({ isPaused: true, isPlaying: false });
       this.config.onPlayPause?.();
     };
@@ -806,14 +814,45 @@ var PlaybackSession = class {
         isPlaying: false,
         isPaused: false,
         isSynthesizing: false,
-        progress: 100
+        progress: 0,
+        visualizationData: {
+          frequencyData: new Uint8Array(0),
+          timeDomainData: new Uint8Array(0)
+        }
       });
       this.config.onPlayEnd?.();
+      this.releaseBlobUrl();
+      this.pausedTime = 0;
       this.stopVisualizationLoop();
+      this.config.onSessionEnd?.(this.id);
     };
-    this.audio.onerror = (e) => {
+    this.audio.onerror = async (e) => {
       const msg = this.audio.error?.message || "Audio playback error";
+      if (msg.includes("Empty src") || msg.includes("empty src")) {
+        console.log("[PlaybackSession] Ignoring empty src error during transition");
+        return;
+      }
       console.error("[PlaybackSession] Audio error:", msg);
+      const isBlobUrlExpired = msg.includes("ERR_FILE_NOT_FOUND") || msg.includes("PIPELINE_ERROR_READ") || msg.includes("MEDIA_ELEMENT_ERROR") || this.audio.error?.code === MediaError.MEDIA_ERR_NETWORK || this.audio.error?.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED;
+      if (isBlobUrlExpired && this.cachedAudioData) {
+        console.warn(
+          "[PlaybackSession] Blob URL expired, attempting to recreate from cache"
+        );
+        this.releaseBlobUrl();
+        const blob = new Blob(this.cachedAudioData, { type: "audio/mpeg" });
+        this.audioUrl = URL.createObjectURL(blob);
+        this.audio.src = this.audioUrl;
+        const resumeTime = this.pausedTime || 0;
+        try {
+          await this.audio.play();
+          if (resumeTime > 0) {
+            this.audio.currentTime = resumeTime;
+          }
+          return;
+        } catch (playErr) {
+          console.error("[PlaybackSession] Failed to replay from cache:", playErr);
+        }
+      }
       this.updateState({ error: msg });
       this.config.onError?.(new Error(msg));
     };
@@ -933,6 +972,9 @@ var PlaybackSession = class {
               isSynthesizing: false,
               isSessionStarted: false
             });
+            if (this.sessionAudioBuffers.length > 0) {
+              this.cachedAudioData = [...this.sessionAudioBuffers];
+            }
             if (this.sessionAudioBuffers.length > 0 && this.streamText) {
               const speed = audioParams?.speech_rate || 0;
               const cacheKey = TTSCache.generateKey(
@@ -1037,11 +1079,12 @@ var PlaybackSession = class {
     const cacheKey = TTSCache.generateKey(formattedText, voice, speed);
     const cachedData = await TTSCache.get(cacheKey);
     if (cachedData && cachedData.length > 0) {
+      this.cachedAudioData = cachedData;
+      this.releaseBlobUrl();
       const blob = new Blob(cachedData, { type: "audio/mpeg" });
-      const url = URL.createObjectURL(blob);
-      if (this.audioUrl) URL.revokeObjectURL(this.audioUrl);
-      this.audioUrl = url;
-      this.audio.src = url;
+      this.audioUrl = URL.createObjectURL(blob);
+      this.audio.src = this.audioUrl;
+      this.pausedTime = 0;
       this.updateState({ isSynthesizing: false });
       if (this.config.autoPlay !== false) {
         try {
@@ -1094,24 +1137,52 @@ var PlaybackSession = class {
     setTimeout(() => this.processQueue(), 0);
   }
   pause() {
+    if (this.isStopping) return;
+    this.pausedTime = this.audio.currentTime;
     this.audio.pause();
+    this.releaseBlobUrl();
     this.updateState({ isPaused: true, isPlaying: false });
   }
-  resume() {
-    this.audio.play();
+  async resume() {
+    if (!this.audioUrl && this.cachedAudioData) {
+      const blob = new Blob(this.cachedAudioData, { type: "audio/mpeg" });
+      this.audioUrl = URL.createObjectURL(blob);
+      this.audio.src = this.audioUrl;
+      await new Promise((resolve, reject) => {
+        const onLoaded = () => {
+          resolve();
+          this.audio.removeEventListener("loadedmetadata", onLoaded);
+          this.audio.removeEventListener("error", onError);
+        };
+        const onError = () => {
+          reject(new Error("Failed to load audio"));
+          this.audio.removeEventListener("loadedmetadata", onLoaded);
+          this.audio.removeEventListener("error", onError);
+        };
+        this.audio.addEventListener("loadedmetadata", onLoaded);
+        this.audio.addEventListener("error", onError);
+        setTimeout(() => {
+          this.audio.removeEventListener("loadedmetadata", onLoaded);
+          this.audio.removeEventListener("error", onError);
+          resolve();
+        }, 3e3);
+      });
+      this.audio.currentTime = this.pausedTime;
+    }
+    await this.audio.play();
     this.updateState({ isPaused: false, isPlaying: true });
   }
   stop() {
+    this.isStopping = true;
     if (this.client) {
       this.client.close();
       this.client = null;
     }
     this.audio.pause();
     this.audio.currentTime = 0;
-    if (this.audioUrl) {
-      URL.revokeObjectURL(this.audioUrl);
-      this.audioUrl = null;
-    }
+    this.releaseBlobUrl();
+    this.cachedAudioData = null;
+    this.pausedTime = 0;
     this.stopVisualizationLoop();
     this.audioContext?.close();
     this.audioContext = null;
@@ -1121,8 +1192,14 @@ var PlaybackSession = class {
       isSynthesizing: false,
       progress: 0,
       isConnected: false,
-      isSessionStarted: false
+      isSessionStarted: false,
+      // 清除可视化数据
+      visualizationData: {
+        frequencyData: new Uint8Array(0),
+        timeDomainData: new Uint8Array(0)
+      }
     });
+    this.isStopping = false;
   }
   seek(percentage) {
     let duration = this.audio.duration;
@@ -1186,6 +1263,18 @@ var PlaybackSession = class {
       this.animId = null;
     }
   }
+  /**
+   * 释放 Blob URL 资源
+   * 在暂停、停止、播放完毕时调用，避免 Blob URL 长期占用内存和过期问题
+   */
+  releaseBlobUrl() {
+    if (this.audioUrl) {
+      URL.revokeObjectURL(this.audioUrl);
+      this.audioUrl = null;
+    }
+    this.audio.src = "";
+    this.audio.load();
+  }
 };
 var StreamPlaybackManagerImpl = class {
   constructor() {
@@ -1197,9 +1286,28 @@ var StreamPlaybackManagerImpl = class {
    */
   createSession(id, config) {
     if (this.activeStreamId && this.activeStreamId !== id) {
-      this.pause(this.activeStreamId);
+      const activeSession = this.sessions.get(this.activeStreamId);
+      if (activeSession) {
+        const isPlaying = activeSession.state.isPlaying;
+        const isPaused = activeSession.state.isPaused;
+        console.log(`[StreamPlaybackManager] Checking active session ${this.activeStreamId}: isPlaying=${isPlaying}, isPaused=${isPaused}`);
+        if (isPlaying || isPaused) {
+          console.log(`[StreamPlaybackManager] Pausing active session ${this.activeStreamId}`);
+          this.pause(this.activeStreamId);
+        } else {
+          console.log(`[StreamPlaybackManager] Active session ${this.activeStreamId} is not playing/paused, skipping pause`);
+        }
+      }
     }
-    const session = new PlaybackSession(id, config);
+    const session = new PlaybackSession(id, {
+      ...config,
+      onSessionEnd: (sessionId) => {
+        if (this.activeStreamId === sessionId) {
+          this.activeStreamId = null;
+        }
+        config.onSessionEnd?.(sessionId);
+      }
+    });
     this.sessions.set(id, session);
     this.activeStreamId = id;
     return session;
@@ -1737,9 +1845,10 @@ var AudioWaveVisualizer = ({
     ctx.strokeStyle = fillStyle;
     if (style === "bar" && frequencyData) {
       const barWidth = w / bars;
-      const step = Math.floor(frequencyData.length / bars);
       for (let i = 0; i < bars; i++) {
-        const value = frequencyData[i * step] || 0;
+        const halfLength = frequencyData.length / 2;
+        const index = Math.floor(i / bars * halfLength);
+        const value = frequencyData[index] || 0;
         const percent = value / 255;
         const barHeight = h * percent;
         ctx.fillRect(i * barWidth, h - barHeight, barWidth - 2, barHeight);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wq-hook/volcano-react",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Volcano Engine ASR & TTS React Hooks",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",