@wq-hook/volcano-react 1.0.2 → 1.0.3

package/dist/index.mjs

@@ -396,10 +396,253 @@ function useVolcanoTTS({
 }
 
 // src/tts/useMessageTTS.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+
+// src/tts/StreamPlaybackManager.ts
 import { WebsocketMSE as WebsocketMSE2 } from "@wq-hook/volcano-sdk/tts";
+
+// src/tts/StreamingTextSplitter.ts
 import { MarkdownFormatter as MarkdownFormatter2 } from "@wq-hook/volcano-sdk";
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
 import emojiRegex2 from "emoji-regex";
+var StreamingTextSplitter = class {
+  constructor(options = {}) {
+    /** 当前缓冲区 */
+    this.buffer = "";
+    /** 分段索引计数器 */
+    this.segmentIndex = 0;
+    /** 已完成的分段列表 */
+    this.segments = [];
+    /** 是否已完成 */
+    this.isCompleted = false;
+    this.maxLength = options.maxLength || 150;
+    this.minLength = options.minLength || 10;
+    this.onSegmentComplete = options.onSegmentComplete;
+    this.onAllComplete = options.onAllComplete;
+  }
+  /**
+   * 接收流式文本块
+   * @param chunk - 文本块
+   */
+  onChunk(chunk) {
+    if (!chunk || this.isCompleted) return;
+    this.buffer += chunk;
+    if (this.detectBoundary(chunk)) {
+      const newlineIndex = this.buffer.indexOf("\n");
+      if (newlineIndex !== -1) {
+        if (newlineIndex === 0) {
+          this.buffer = this.buffer.substring(1);
+          return;
+        }
+        const segmentBuffer = this.buffer.substring(0, newlineIndex);
+        this.buffer = this.buffer.substring(newlineIndex + 1);
+        this.flushSegmentWithBuffer(segmentBuffer);
+        while (this.buffer.includes("\n")) {
+          const nextNewlineIndex = this.buffer.indexOf("\n");
+          if (nextNewlineIndex === 0) {
+            this.buffer = this.buffer.substring(1);
+            continue;
+          }
+          const nextSegmentBuffer = this.buffer.substring(0, nextNewlineIndex);
+          this.buffer = this.buffer.substring(nextNewlineIndex + 1);
+          this.flushSegmentWithBuffer(nextSegmentBuffer);
+        }
+      }
+    }
+  }
+  /**
+   * 检测分段边界
+   * @param chunk - 最新接收的文本块
+   * @returns 是否应该分段
+   */
+  detectBoundary(chunk) {
+    if (chunk.includes("\n")) {
+      if (this.buffer.length >= this.maxLength) {
+        this.forceSplitAtSentenceBoundary();
+      }
+      return true;
+    }
+    if (this.buffer.length >= this.maxLength) {
+      this.forceSplitAtSentenceBoundary();
+      return true;
+    }
+    return false;
+  }
+  /**
+   * 在句子边界强制拆分超长段落
+   */
+  forceSplitAtSentenceBoundary() {
+    const content = this.buffer;
+    const sentenceEnders = /[。？！]/g;
+    let lastMatch = null;
+    let match = null;
+    while ((match = sentenceEnders.exec(content)) !== null) {
+      lastMatch = match;
+    }
+    if (lastMatch && lastMatch.index > this.minLength) {
+      const splitPoint = lastMatch.index + 1;
+      const firstPart = content.substring(0, splitPoint);
+      const secondPart = content.substring(splitPoint);
+      this.buffer = firstPart;
+      this.flushSegment();
+      this.buffer = secondPart;
+    } else {
+      const midPoint = Math.floor(content.length / 2);
+      const firstPart = content.substring(0, midPoint);
+      const secondPart = content.substring(midPoint);
+      this.buffer = firstPart;
+      this.flushSegment();
+      this.buffer = secondPart;
+    }
+  }
+  /**
+   * 使用指定缓冲区内容刷新为分段
+   * @param bufferToFlush - 要分段的缓冲区内容
+   */
+  flushSegmentWithBuffer(bufferToFlush) {
+    const content = bufferToFlush;
+    if (!content) return;
+    const isPureSymbols = /^[^\p{L}\p{N}]*$/u.test(content);
+    const isTooShort = content.length < 3;
+    if (isPureSymbols && isTooShort) {
+      return;
+    }
+    const formattedContent = MarkdownFormatter2.format(content).replace(emojiRegex2(), "");
+    if (!formattedContent) return;
+    let subSegments = [formattedContent];
+    if (formattedContent.length > this.maxLength) {
+      subSegments = this.splitLongSegment(formattedContent);
+    }
+    for (const subSegment of subSegments) {
+      if (!subSegment) continue;
+      const segment = {
+        index: this.segmentIndex++,
+        content: subSegment,
+        length: subSegment.length,
+        sent: false
+      };
+      this.segments.push(segment);
+      this.onSegmentComplete?.(segment);
+    }
+  }
+  /**
+   * 刷新当前缓冲区为分段
+   */
+  flushSegment() {
+    const content = this.buffer.trim();
+    if (!content) {
+      this.buffer = "";
+      return;
+    }
+    const isPureSymbols = /^[^\p{L}\p{N}]*$/u.test(content);
+    const isTooShort = content.length < 3;
+    if (isPureSymbols && isTooShort) {
+      this.buffer = "";
+      return;
+    }
+    const formattedContent = MarkdownFormatter2.format(content).replace(emojiRegex2(), "");
+    if (!formattedContent) {
+      this.buffer = "";
+      return;
+    }
+    let subSegments = [formattedContent];
+    if (formattedContent.length > this.maxLength) {
+      subSegments = this.splitLongSegment(formattedContent);
+    }
+    for (const subSegment of subSegments) {
+      if (!subSegment) continue;
+      const segment = {
+        index: this.segmentIndex++,
+        content: subSegment,
+        length: subSegment.length,
+        sent: false
+      };
+      this.segments.push(segment);
+      this.onSegmentComplete?.(segment);
+    }
+    this.buffer = "";
+  }
+  /**
+   * 拆分超长分段
+   * @param segment - 超长的分段
+   * @returns 拆分后的分段数组
+   */
+  splitLongSegment(segment) {
+    const result = [];
+    let current = "";
+    for (const char of segment) {
+      current += char;
+      const shouldSplit = /[。？！，,]/.test(char);
+      if (shouldSplit && current.length <= this.maxLength) {
+        result.push(current);
+        current = "";
+      } else if (current.length >= this.maxLength) {
+        result.push(current);
+        current = "";
+      }
+    }
+    if (current) {
+      result.push(current);
+    }
+    return result.filter((s) => s.length > 0);
+  }
+  /**
+   * 完成流式输入
+   * 处理剩余的缓冲区内容
+   */
+  complete() {
+    if (this.isCompleted) return;
+    this.isCompleted = true;
+    while (this.buffer.includes("\n")) {
+      const newlineIndex = this.buffer.indexOf("\n");
+      if (newlineIndex === 0) {
+        this.buffer = this.buffer.substring(1);
+        continue;
+      }
+      const segmentBuffer = this.buffer.substring(0, newlineIndex);
+      this.buffer = this.buffer.substring(newlineIndex + 1);
+      this.flushSegmentWithBuffer(segmentBuffer);
+    }
+    if (this.buffer.trim()) {
+      this.flushSegment();
+    }
+    this.onAllComplete?.(this.segments);
+  }
+  /**
+   * 重置分段器状态
+   */
+  reset() {
+    this.buffer = "";
+    this.segmentIndex = 0;
+    this.segments = [];
+    this.isCompleted = false;
+  }
+  /**
+   * 获取当前缓冲区内容
+   */
+  getBuffer() {
+    return this.buffer;
+  }
+  /**
+   * 获取已分段的列表
+   */
+  getSegments() {
+    return this.segments;
+  }
+  /**
+   * 获取统计信息
+   */
+  getStats() {
+    return {
+      bufferLength: this.buffer.length,
+      segmentCount: this.segments.length,
+      totalChars: this.segments.reduce((sum, seg) => sum + seg.length, 0)
+    };
+  }
+};
+
+// src/tts/StreamPlaybackManager.ts
+import emojiRegex3 from "emoji-regex";
+import { MarkdownFormatter as MarkdownFormatter3 } from "@wq-hook/volcano-sdk";
 
 // src/tts/TextSplitter.ts
 function splitTextByDelimiters(text, minLength = 10, maxLength = 150) {
@@ -469,338 +712,178 @@ function splitTextByDelimiters(text, minLength = 10, maxLength = 150) {
   return segments;
 }
 
-// src/tts/Metrics.ts
-var NoopMetricsCollector = class {
-  record(_metric) {
-  }
-};
-
-// src/tts/useMessageTTS.ts
+// src/tts/StreamPlaybackManager.ts
 var WS_URL = "wss://openspeech.bytedance.com/api/v3/tts/bidirection";
-var activeInstances = /* @__PURE__ */ new Map();
 function buildFullUrl2(url, params) {
-  const { ...auth } = params;
   const arr = [];
-  for (const key in auth) {
-    if (Object.prototype.hasOwnProperty.call(auth, key)) {
+  for (const key in params) {
+    if (Object.prototype.hasOwnProperty.call(params, key)) {
       arr.push(
-        `${key}=${encodeURIComponent(auth[key])}`
+        `${key}=${encodeURIComponent(params[key])}`
       );
     }
   }
   return `${url}?${arr.join("&")}`;
 }
-function useMessageTTS({
-  ttsConfig,
-  audioParams,
-  autoPlay = true,
-  metricsCollector = new NoopMetricsCollector(),
-  onPlayStart,
-  onPlayPause,
-  onPlayResume,
-  onPlayEnd,
-  onError,
-  exclusive = true,
-  fallbackVoice,
-  visualization
-}) {
-  const [isPlaying, setIsPlaying] = useState3(false);
-  const [isPaused, setIsPaused] = useState3(false);
-  const [isSynthesizing, setIsSynthesizing] = useState3(false);
-  const [error, setErrorState] = useState3(null);
-  const [progress, setProgress] = useState3(0);
-  const [visualizationData, setVisualizationData] = useState3(
-    {
-      frequencyData: new Uint8Array(0),
-      timeDomainData: new Uint8Array(0)
-    }
-  );
-  const instanceId = useRef3(
-    `tts-${Date.now()}-${Math.random().toString(36).slice(2)}`
-  ).current;
-  const clientRef = useRef3(null);
-  const audioRef = useRef3(null);
-  const audioContextRef = useRef3(null);
-  const analyserRef = useRef3(null);
-  const sourceRef = useRef3(null);
-  const audioUrlRef = useRef3(null);
-  const cacheKeyRef = useRef3("");
-  const audioBuffersRef = useRef3([]);
-  const isFallbackRef = useRef3(false);
-  const fallbackUtteranceRef = useRef3(null);
-  const stopOthers = useCallback3(() => {
-    if (!exclusive) return;
-    activeInstances.forEach((instance, id) => {
-      if (id !== instanceId) {
-        instance.pause();
-      }
-    });
-  }, [exclusive, instanceId]);
-  const initAudioContext = useCallback3(() => {
-    if (!audioRef.current) return;
-    if (!audioContextRef.current) {
+var PlaybackSession = class {
+  constructor(id, config) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.audioContext = null;
+    this.analyser = null;
+    this.source = null;
+    this.audioUrl = null;
+    // TTS Resources
+    this.client = null;
+    this.splitter = null;
+    // Internal State
+    this.segmentQueue = [];
+    this.isSending = false;
+    this.isSessionStarting = false;
+    this.streamText = "";
+    this.sessionAudioBuffers = [];
+    this.isStreamFinished = false;
+    this.isSessionFinished = false;
+    this.resolveAllSegmentsSent = null;
+    this.animId = null;
+    this.lastVisUpdate = 0;
+    this.id = id;
+    this.config = config;
+    this.state = {
+      isPlaying: false,
+      isPaused: false,
+      isSynthesizing: false,
+      progress: 0,
+      visualizationData: {
+        frequencyData: new Uint8Array(0),
+        timeDomainData: new Uint8Array(0)
+      },
+      error: null,
+      isConnected: false,
+      isSessionStarted: false,
+      isStreamFinished: false
+    };
+    this.audio = new Audio();
+    this.audio.crossOrigin = "anonymous";
+    this.setupAudioListeners();
+  }
+  /**
+   * 初始化 AudioContext（用于可视化）
+   */
+  initAudioContext() {
+    if (!this.audioContext) {
       const AudioContextClass = window.AudioContext || window.webkitAudioContext;
-      audioContextRef.current = new AudioContextClass();
+      this.audioContext = new AudioContextClass();
     }
-    if (audioContextRef.current.state === "suspended") {
-      audioContextRef.current.resume();
+    if (this.audioContext.state === "suspended") {
+      this.audioContext.resume();
     }
-    if (!analyserRef.current) {
-      analyserRef.current = audioContextRef.current.createAnalyser();
-      analyserRef.current.fftSize = visualization?.fftSize || 256;
+    if (!this.analyser && this.audioContext) {
+      this.analyser = this.audioContext.createAnalyser();
+      this.analyser.fftSize = this.config.visualization?.fftSize || 256;
     }
-    if (!sourceRef.current) {
+    if (!this.source && this.audioContext && this.analyser) {
       try {
-        sourceRef.current = audioContextRef.current.createMediaElementSource(
-          audioRef.current
-        );
-        sourceRef.current.connect(analyserRef.current);
-        analyserRef.current.connect(audioContextRef.current.destination);
+        this.source = this.audioContext.createMediaElementSource(this.audio);
+        this.source.connect(this.analyser);
+        this.analyser.connect(this.audioContext.destination);
       } catch (e) {
       }
     }
-  }, []);
-  const cleanupAudio = useCallback3(() => {
-    if (audioUrlRef.current) {
-      URL.revokeObjectURL(audioUrlRef.current);
-      audioUrlRef.current = null;
-    }
-    if (audioRef.current) {
-      audioRef.current.onerror = null;
-      audioRef.current.onended = null;
-      audioRef.current.onpause = null;
-      audioRef.current.onplay = null;
-      audioRef.current.ontimeupdate = null;
-      audioRef.current.pause();
-      audioRef.current.src = "";
-      audioRef.current = null;
-    }
-    if (sourceRef.current) {
-      try {
-        sourceRef.current.disconnect();
-      } catch (e) {
+  }
+  setupAudioListeners() {
+    this.audio.onplay = () => {
+      this.updateState({ isPlaying: true, isPaused: false });
+      this.config.onPlayStart?.();
+      this.initAudioContext();
+      this.startVisualizationLoop();
+    };
+    this.audio.onpause = () => {
+      this.updateState({ isPaused: true, isPlaying: false });
+      this.config.onPlayPause?.();
+    };
+    this.audio.onended = () => {
+      this.updateState({
+        isPlaying: false,
+        isPaused: false,
+        isSynthesizing: false,
+        progress: 100
+      });
+      this.config.onPlayEnd?.();
+      this.stopVisualizationLoop();
+    };
+    this.audio.onerror = (e) => {
+      const msg = this.audio.error?.message || "Audio playback error";
+      console.error("[PlaybackSession] Audio error:", msg);
+      this.updateState({ error: msg });
+      this.config.onError?.(new Error(msg));
+    };
+    this.audio.ontimeupdate = () => {
+      let duration = this.audio.duration;
+      if (!isFinite(duration) && this.audio.buffered.length > 0) {
+        duration = this.audio.buffered.end(this.audio.buffered.length - 1);
       }
-      sourceRef.current = null;
-    }
-    if (fallbackUtteranceRef.current) {
-      window.speechSynthesis.cancel();
-      fallbackUtteranceRef.current = null;
-    }
-    isFallbackRef.current = false;
-  }, []);
-  const stop = useCallback3(() => {
-    if (clientRef.current) {
-      clientRef.current.close();
-      clientRef.current = null;
-    }
-    cleanupAudio();
-    setIsPlaying(false);
-    setIsPaused(false);
-    setIsSynthesizing(false);
-    setProgress(0);
-    activeInstances.delete(instanceId);
-  }, [cleanupAudio, instanceId]);
-  const pause = useCallback3(() => {
-    if (isFallbackRef.current) {
-      window.speechSynthesis.pause();
-    } else if (audioRef.current) {
-      audioRef.current.pause();
-    }
-    setIsPaused(true);
-    setIsPlaying(false);
-    onPlayPause?.();
-  }, [onPlayPause]);
-  const resume = useCallback3(() => {
-    stopOthers();
-    if (isFallbackRef.current) {
-      window.speechSynthesis.resume();
-    } else if (audioRef.current) {
-      audioRef.current.play();
-    }
-    setIsPaused(false);
-    setIsPlaying(true);
-    onPlayResume?.();
-    activeInstances.set(instanceId, { pause });
-  }, [stopOthers, instanceId, pause, onPlayResume]);
-  const togglePlay = useCallback3(() => {
-    if (isPlaying) {
-      pause();
-    } else {
-      resume();
-    }
-  }, [isPlaying, pause, resume]);
-  const playFallback = useCallback3(
-    (text) => {
-      console.warn("[useMessageTTS] Switching to fallback TTS");
-      isFallbackRef.current = true;
-      if (clientRef.current) {
-        clientRef.current.close();
-        clientRef.current = null;
+      if (isFinite(duration) && duration > 0) {
+        const progress = this.audio.currentTime / duration * 100;
+        this.updateState({ progress });
       }
-      if (audioRef.current) {
-        audioRef.current.pause();
-        audioRef.current = null;
+    };
+  }
+  /**
+   * 建立 WebSocket 连接
+   */
+  async connect() {
+    if (this.state.isConnected) return;
+    this.updateState({
+      error: null,
+      progress: 0,
+      isSynthesizing: false,
+      isConnected: false,
+      isSessionStarted: false
+    });
+    this.streamText = "";
+    this.segmentQueue = [];
+    this.sessionAudioBuffers = [];
+    this.isStreamFinished = false;
+    this.isSessionFinished = false;
+    this.isSessionStarting = false;
+    if (this.client) {
+      this.client.close();
+      this.client = null;
+    }
+    this.splitter = new StreamingTextSplitter({
+      maxLength: this.config.maxSegmentLength || 150,
+      onSegmentComplete: (segment) => {
+        this.segmentQueue.push(segment);
+        if (this.state.isSessionStarted) {
+          this.processQueue();
+        }
       }
-      const utterance = new SpeechSynthesisUtterance(text);
-      utterance.rate = audioParams?.speech_rate || 1;
-      const voices = window.speechSynthesis.getVoices();
-      const zhVoice = voices.find((v) => v.lang.includes("zh"));
-      if (zhVoice) utterance.voice = zhVoice;
-      utterance.onstart = () => {
-        setIsPlaying(true);
-        setIsPaused(false);
-        setIsSynthesizing(false);
-        onPlayStart?.();
-        activeInstances.set(instanceId, { pause });
-      };
-      utterance.onend = () => {
-        setIsPlaying(false);
-        setIsPaused(false);
-        activeInstances.delete(instanceId);
-        onPlayEnd?.();
-      };
-      utterance.onerror = (e) => {
-        console.error("[useMessageTTS] Fallback TTS failed", e);
-        setErrorState("Fallback TTS failed");
-        onError?.(new Error("Fallback TTS failed"));
-        setIsPlaying(false);
-      };
-      fallbackUtteranceRef.current = utterance;
-      window.speechSynthesis.speak(utterance);
-    },
-    [audioParams, instanceId, onError, onPlayEnd, onPlayStart, pause]
-  );
-  const executeTTS = useCallback3(
-    async (text, targetVoice) => {
-      stop();
-      stopOthers();
-      setErrorState(null);
-      setIsSynthesizing(true);
-      setProgress(0);
-      audioBuffersRef.current = [];
-      isFallbackRef.current = false;
-      const speed = audioParams?.speech_rate || 0;
-      const voice = targetVoice;
-      const cacheKey = TTSCache.generateKey(text, voice, speed);
-      cacheKeyRef.current = cacheKey;
-      const startTime = Date.now();
-      metricsCollector.record({
-        name: "tts_request",
-        labels: { voice, speed, text_length: text.length },
-        value: 1,
-        timestamp: startTime
-      });
+    });
+    this.client = WebsocketMSE2({ autoStartSession: false });
+    const { ttsConfig, audioParams } = this.config;
+    const voice = audioParams?.speaker || "zh_female_vv_uranus_bigtts";
+    const startTime = Date.now();
+    this.config.metricsCollector?.record({
+      name: "tts_request",
+      labels: { voice, text_length: 0 },
+      value: 1,
+      timestamp: startTime
+    });
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        const err = new Error("WebSocket connection timeout (10s)");
+        this.updateState({ error: err.message });
+        reject(err);
+      }, 1e4);
       try {
-        const cachedData = await TTSCache.get(cacheKey);
-        const audio = new Audio();
-        audio.crossOrigin = "anonymous";
-        audioRef.current = audio;
-        audio.onplay = () => {
-          setIsPlaying(true);
-          setIsPaused(false);
-          onPlayStart?.();
-          initAudioContext();
-          activeInstances.set(instanceId, { pause });
-          metricsCollector.record({
-            name: "tts_latency",
-            labels: { stage: "playback", voice, speed },
-            value: Date.now() - startTime,
-            timestamp: Date.now()
-          });
-        };
-        audio.onpause = () => {
-          if (!audio.ended) {
-          }
-        };
-        audio.onended = () => {
-          setIsPlaying(false);
-          setIsPaused(false);
-          onPlayEnd?.();
-          activeInstances.delete(instanceId);
-        };
-        audio.onerror = (e) => {
-          console.error("Audio playback error:", e, audio.error);
-          metricsCollector.record({
-            name: "tts_error",
-            labels: {
-              error_code: "playback_error",
-              voice,
-              detail: audio.error?.message || String(audio.error?.code)
-            },
-            value: 1,
-            timestamp: Date.now()
-          });
-          handleError(text, voice);
-        };
-        audio.ontimeupdate = () => {
-          let duration = audio.duration;
-          if (!isFinite(duration)) {
-            if (audio.buffered.length > 0) {
-              duration = audio.buffered.end(audio.buffered.length - 1);
-            }
-          }
-          if (isFinite(duration) && duration > 0) {
-            setProgress(audio.currentTime / duration * 100);
-          }
-        };
-        if (cachedData) {
-          const totalSize = cachedData.reduce(
-            (acc, buf) => acc + buf.byteLength,
-            0
-          );
-          metricsCollector.record({
-            name: "tts_cache_hit",
-            labels: { voice, speed },
-            value: 1,
-            timestamp: Date.now()
-          });
-          console.log(
-            JSON.stringify({
-              event: "tts_cache_hit",
-              cache_hit: true,
-              text_len: text.length,
-              voice,
-              speed,
-              data_size: totalSize
-            })
-          );
-          if (totalSize === 0) {
-            console.warn(
-              "[useMessageTTS] Cached data is empty, falling back to stream"
-            );
-          } else {
-            const blob = new Blob(cachedData, { type: "audio/mpeg" });
-            const url2 = URL.createObjectURL(blob);
-            audioUrlRef.current = url2;
-            audio.src = url2;
-            setIsSynthesizing(false);
-            if (autoPlay) {
-              try {
-                await audio.play();
-              } catch (err) {
-                console.warn("AutoPlay blocked", err);
-              }
-            }
-            return;
-          }
-        }
-        console.log("[useMessageTTS] Cache miss, starting stream");
-        clientRef.current = WebsocketMSE2({ autoStartSession: true });
-        const formattedText = MarkdownFormatter2.format(text).replace(
-          emojiRegex2(),
-          ""
-        );
-        const segments = splitTextByDelimiters(formattedText);
-        const url = clientRef.current.start({
+        const url = this.client.start({
           url: buildFullUrl2(WS_URL, {
             api_access_key: `Jwt; ${ttsConfig.token}`,
             api_app_key: ttsConfig.appid,
             api_resource_id: ttsConfig.resourceId || "seed-tts-2.0"
           }),
           config: {
-            user: {
-              uid: `req-${Date.now()}`
-            },
+            user: { uid: `req-${Date.now()}` },
             namespace: ttsConfig.namespace || "BidirectionalTTS",
             req_params: {
               speaker: voice,
@@ -815,456 +898,362 @@ function useMessageTTS({
                 enable_language_detector: true,
                 disable_markdown_filter: true,
                 enable_latex_tn: true
-                // max_length_to_filter_parenthesis: 100,
               })
             }
           },
+          onStart: () => {
+            this.updateState({ isConnected: true });
+          },
+          onConnectionReady: () => {
+            clearTimeout(timeoutId);
+            resolve();
+          },
           onSessionStarted: () => {
-            segments.forEach((seg) => {
-              clientRef.current?.sendText(seg.content);
-            });
-            clientRef.current?.finishSession();
+            this.updateState({ isSessionStarted: true });
+            this.isSessionStarting = false;
+            if (this.segmentQueue.length > 0) {
+              this.processQueue();
+            }
           },
           onMessage: (data) => {
-            if (audioBuffersRef.current.length === 0) {
-              console.log(
-                JSON.stringify({
-                  event: "tts_first_packet",
-                  latency_ms: Date.now() - startTime,
-                  voice
-                })
-              );
+            this.updateState({ isSynthesizing: true });
+            if (this.sessionAudioBuffers.length === 0) {
+              this.config.metricsCollector?.record({
+                name: "tts_latency",
+                labels: { stage: "first_packet", voice },
+                value: Date.now() - startTime,
+                timestamp: Date.now()
+              });
             }
             const buffer = data instanceof ArrayBuffer ? data.slice(0) : new Uint8Array(data).buffer;
-            audioBuffersRef.current.push(buffer);
+            this.sessionAudioBuffers.push(buffer);
           },
           onSessionFinished: () => {
-            setIsSynthesizing(false);
-            if (audioBuffersRef.current.length > 0) {
-              TTSCache.set(cacheKey, [...audioBuffersRef.current]);
-            }
-            console.log(
-              JSON.stringify({
-                event: "tts_synthesis_finished",
-                cache_hit: false,
-                text_len: text.length,
-                duration_ms: Date.now() - startTime,
+            this.updateState({
+              isSynthesizing: false,
+              isSessionStarted: false
+            });
+            if (this.sessionAudioBuffers.length > 0 && this.streamText) {
+              const speed = audioParams?.speech_rate || 0;
+              const cacheKey = TTSCache.generateKey(
+                this.streamText,
                 voice,
                 speed
-              })
-            );
+              );
+              TTSCache.set(cacheKey, [...this.sessionAudioBuffers]);
+            }
+            this.config.metricsCollector?.record({
+              name: "tts_synthesis_finished",
+              labels: { voice, text_length: this.streamText.length },
+              value: Date.now() - startTime,
+              timestamp: Date.now()
+            });
           },
           onError: (err) => {
-            console.error("TTS Synthesis error:", err);
-            metricsCollector.record({
-              name: "tts_error",
-              labels: { error_code: "synthesis_error", voice },
-              value: 1,
-              timestamp: Date.now()
+            if (!this.state.isConnected) {
+              clearTimeout(timeoutId);
+              reject(new Error(err.msg || "TTS error"));
+            }
+            console.error("[PlaybackSession] TTS error:", err);
+            this.updateState({
+              error: err.msg || "TTS error",
+              isSynthesizing: false
             });
-            handleError(text, voice);
-            setIsSynthesizing(false);
+            this.config.onError?.(new Error(err.msg || "TTS error"));
+          },
+          onWSError: (err) => {
+            if (!this.state.isConnected) {
+              clearTimeout(timeoutId);
+              reject(err instanceof Error ? err : new Error("WebSocket error"));
+            }
           }
         });
-        audioUrlRef.current = url;
-        audio.src = url;
-        if (autoPlay) {
-          try {
-            await audio.play();
-          } catch (e) {
-            console.warn("Autoplay blocked/pending", e);
-          }
+        if (this.audioUrl) {
+          URL.revokeObjectURL(this.audioUrl);
+        }
+        this.audioUrl = url;
+        this.audio.src = url;
+        if (this.config.autoPlay !== false) {
+          this.audio.play().catch(
+            (e) => console.warn("[PlaybackSession] Autoplay blocked:", e)
+          );
         }
       } catch (err) {
-        console.error("Unexpected error in executeTTS:", err);
-        metricsCollector.record({
-          name: "tts_error",
-          labels: { error_code: "unexpected_error", voice },
-          value: 1,
-          timestamp: Date.now()
-        });
-        handleError(text, voice);
-      }
-    },
-    [
-      ttsConfig,
-      audioParams,
-      autoPlay,
-      stop,
-      stopOthers,
-      instanceId,
-      onPlayStart,
-      onPlayEnd,
-      initAudioContext,
-      pause,
-      fallbackVoice,
-      metricsCollector
-    ]
-  );
-  const handleError = useCallback3(
-    (text, failedVoice) => {
-      if (fallbackVoice && failedVoice !== fallbackVoice) {
-        console.warn(
-          `[useMessageTTS] Voice ${failedVoice} failed, switching to fallback voice ${fallbackVoice}`
+        clearTimeout(timeoutId);
+        console.error("[PlaybackSession] Connect error:", err);
+        this.updateState({ error: String(err) });
+        this.config.onError?.(
+          err instanceof Error ? err : new Error(String(err))
         );
-        if (clientRef.current) {
-          clientRef.current.close();
-          clientRef.current = null;
-        }
-        if (audioRef.current) {
-          audioRef.current.pause();
-          audioRef.current = null;
+        reject(err);
+      }
+    });
+  }
+  /**
+   * 发送流式文本
+   */
+  handleStreamChunk(chunk) {
+    if (!chunk) return;
+    this.streamText += chunk;
+    if (!this.state.isSessionStarted && !this.isSessionStarting && this.client && this.state.isConnected && !this.isSessionFinished) {
+      this.isSessionStarting = true;
+      this.client.startSession();
+    }
+    this.splitter?.onChunk(chunk);
+    if (this.state.isSessionStarted) {
+      this.processQueue();
+    }
+  }
+  /**
+   * 结束流式输入
+   */
+  async finishStream() {
+    this.isStreamFinished = true;
+    this.updateState({ isStreamFinished: true });
+    this.splitter?.complete();
+    if (this.state.isSessionStarted) {
+      this.processQueue();
+    }
+    if (this.segmentQueue.length > 0 || this.isSending) {
+      await new Promise((resolve) => {
+        this.resolveAllSegmentsSent = resolve;
+      });
+    } else if (this.client && this.state.isSessionStarted && !this.isSessionFinished) {
+      this.isSessionFinished = true;
+      this.client.finishSession();
+    }
+  }
+  /**
+   * 处理非流式播放（直接播放整段文本）
+   */
+  async play(text) {
+    const formattedText = MarkdownFormatter3.format(text).replace(
+      emojiRegex3(),
+      ""
+    );
+    const { audioParams } = this.config;
+    const voice = audioParams?.speaker || "zh_female_vv_uranus_bigtts";
+    const speed = audioParams?.speech_rate || 0;
+    const cacheKey = TTSCache.generateKey(formattedText, voice, speed);
+    const cachedData = await TTSCache.get(cacheKey);
+    if (cachedData && cachedData.length > 0) {
+      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.updateState({ isSynthesizing: false });
+      if (this.config.autoPlay !== false) {
+        try {
+          await this.audio.play();
+        } catch (e) {
+          console.warn("Autoplay blocked", e);
         }
-        executeTTS(text, fallbackVoice);
-      } else {
-        playFallback(text);
       }
-    },
-    [fallbackVoice, executeTTS, playFallback]
-  );
-  const play = useCallback3(
-    (text) => {
-      const voice = audioParams?.speaker || "zh_female_vv_uranus_bigtts";
-      return executeTTS(text, voice);
-    },
-    [audioParams, executeTTS]
-  );
-  const getFrequencyData = useCallback3(() => {
-    if (!analyserRef.current) return new Uint8Array(0);
-    const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
-    analyserRef.current.getByteFrequencyData(dataArray);
-    return dataArray;
-  }, []);
-  const getTimeDomainData = useCallback3(() => {
-    if (!analyserRef.current) return new Uint8Array(0);
-    const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
-    analyserRef.current.getByteTimeDomainData(dataArray);
-    return dataArray;
-  }, []);
-  useEffect2(() => {
-    if (!visualization?.enabled) return;
-    let animId;
-    let lastUpdate = 0;
-    const interval = visualization.refreshInterval || 0;
+      return;
+    }
+    await this.connect();
+    this.streamText = formattedText;
+    const segments = splitTextByDelimiters(formattedText);
+    if (this.state.isConnected) {
+      if (!this.state.isSessionStarted && !this.isSessionStarting) {
+        this.isSessionStarting = true;
+        this.client?.startSession();
+      }
+    }
+    segments.forEach((seg, idx) => {
+      this.segmentQueue.push({
+        index: idx,
+        content: seg.content,
+        length: seg.content.length,
+        sent: false
+      });
+    });
+    if (this.state.isSessionStarted) {
+      this.processQueue();
+    }
+    await this.finishStream();
+  }
+  processQueue() {
+    if (!this.client || !this.state.isSessionStarted || this.isSending || this.isSessionFinished) {
+      return;
+    }
+    if (this.segmentQueue.length === 0) {
+      if (this.isStreamFinished && !this.isSessionFinished) {
+        this.isSessionFinished = true;
+        this.client.finishSession();
+        this.resolveAllSegmentsSent?.();
+      }
+      return;
+    }
+    this.isSending = true;
+    const segment = this.segmentQueue.shift();
+    this.client.sendText(segment.content);
+    segment.sent = true;
+    this.isSending = false;
+    setTimeout(() => this.processQueue(), 0);
+  }
+  pause() {
+    this.audio.pause();
+    this.updateState({ isPaused: true, isPlaying: false });
+  }
+  resume() {
+    this.audio.play();
+    this.updateState({ isPaused: false, isPlaying: true });
+  }
+  stop() {
+    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.stopVisualizationLoop();
+    this.audioContext?.close();
+    this.audioContext = null;
+    this.updateState({
+      isPlaying: false,
+      isPaused: false,
+      isSynthesizing: false,
+      progress: 0,
+      isConnected: false,
+      isSessionStarted: false
+    });
+  }
+  seek(percentage) {
+    let duration = this.audio.duration;
+    if (!isFinite(duration) && this.audio.buffered.length > 0) {
+      duration = this.audio.buffered.end(this.audio.buffered.length - 1);
+    }
+    if (isFinite(duration) && duration > 0) {
+      const time = percentage / 100 * duration;
+      if (isFinite(time)) {
+        this.audio.currentTime = time;
+        this.updateState({ progress: percentage });
+      }
+    }
+  }
+  updateState(partial) {
+    this.state = { ...this.state, ...partial };
+    this.notifyListeners();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    listener(this.state);
+    return () => this.listeners.delete(listener);
+  }
+  notifyListeners() {
+    this.listeners.forEach((l) => l(this.state));
+  }
+  // Visualization
+  getFrequencyData() {
+    if (!this.analyser) return new Uint8Array(0);
+    const data = new Uint8Array(this.analyser.frequencyBinCount);
+    this.analyser.getByteFrequencyData(data);
+    return data;
+  }
+  getTimeDomainData() {
+    if (!this.analyser) return new Uint8Array(0);
+    const data = new Uint8Array(this.analyser.frequencyBinCount);
+    this.analyser.getByteTimeDomainData(data);
+    return data;
+  }
+  startVisualizationLoop() {
+    if (!this.config.visualization?.enabled) return;
     const update = (timestamp) => {
-      if (isPlaying && !isPaused) {
-        if (timestamp - lastUpdate >= interval) {
-          setVisualizationData({
-            frequencyData: getFrequencyData(),
-            timeDomainData: getTimeDomainData()
+      if (this.state.isPlaying && !this.state.isPaused) {
+        if (timestamp - this.lastVisUpdate >= (this.config.visualization?.refreshInterval || 0)) {
+          this.updateState({
+            visualizationData: {
+              frequencyData: this.getFrequencyData(),
+              timeDomainData: this.getTimeDomainData()
+            }
           });
-          lastUpdate = timestamp;
+          this.lastVisUpdate = timestamp;
         }
-        animId = requestAnimationFrame(update);
+        this.animId = requestAnimationFrame(update);
       }
     };
-    if (isPlaying && !isPaused) {
-      animId = requestAnimationFrame(update);
+    this.animId = requestAnimationFrame(update);
+  }
+  stopVisualizationLoop() {
+    if (this.animId) {
+      cancelAnimationFrame(this.animId);
+      this.animId = null;
     }
-    return () => {
-      if (animId) cancelAnimationFrame(animId);
-    };
-  }, [isPlaying, isPaused, visualization, getFrequencyData, getTimeDomainData]);
-  useEffect2(() => {
-    return () => {
-      stop();
-      if (audioContextRef.current) {
-        audioContextRef.current.close();
-      }
-    };
-  }, [stop]);
-  const seek = useCallback3((percentage) => {
-    if (audioRef.current) {
-      let duration = audioRef.current.duration;
-      if (!isFinite(duration) && audioRef.current.buffered.length > 0) {
-        duration = audioRef.current.buffered.end(
-          audioRef.current.buffered.length - 1
-        );
-      }
-      if (isFinite(duration) && duration > 0) {
-        const time = percentage / 100 * duration;
-        if (isFinite(time)) {
-          audioRef.current.currentTime = time;
-          setProgress(percentage);
-        }
+  }
+};
+var StreamPlaybackManagerImpl = class {
+  constructor() {
+    this.sessions = /* @__PURE__ */ new Map();
+    this.activeStreamId = null;
+  }
+  /**
+   * 创建新的播放会话
+   */
+  createSession(id, config) {
+    if (this.activeStreamId && this.activeStreamId !== id) {
+      this.pause(this.activeStreamId);
+    }
+    const session = new PlaybackSession(id, config);
+    this.sessions.set(id, session);
+    this.activeStreamId = id;
+    return session;
+  }
+  /**
+   * 获取会话
+   */
+  getSession(id) {
+    return this.sessions.get(id);
+  }
+  /**
+   * 停止会话
+   */
+  stop(id) {
+    const session = this.sessions.get(id);
+    if (session) {
+      session.stop();
+      this.sessions.delete(id);
+      if (this.activeStreamId === id) {
+        this.activeStreamId = null;
       }
     }
-  }, []);
-  return {
-    isPlaying,
-    isPaused,
-    isSynthesizing,
-    error,
-    play,
-    pause,
-    resume,
-    stop,
-    togglePlay,
-    seek,
-    progress,
-    getFrequencyData,
-    getTimeDomainData,
-    visualizationData
-  };
-}
-
-// src/tts/useStreamTTS.ts
-import { WebsocketMSE as WebsocketMSE3 } from "@wq-hook/volcano-sdk/tts";
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
-
-// src/tts/StreamingTextSplitter.ts
-import { MarkdownFormatter as MarkdownFormatter3 } from "@wq-hook/volcano-sdk";
-import emojiRegex3 from "emoji-regex";
-var StreamingTextSplitter = class {
-  constructor(options = {}) {
-    /** 当前缓冲区 */
-    this.buffer = "";
-    /** 分段索引计数器 */
-    this.segmentIndex = 0;
-    /** 已完成的分段列表 */
-    this.segments = [];
-    /** 是否已完成 */
-    this.isCompleted = false;
-    this.maxLength = options.maxLength || 150;
-    this.minLength = options.minLength || 10;
-    this.onSegmentComplete = options.onSegmentComplete;
-    this.onAllComplete = options.onAllComplete;
-  }
-  /**
-   * 接收流式文本块
-   * @param chunk - 文本块
-   */
-  onChunk(chunk) {
-    if (!chunk || this.isCompleted) return;
-    this.buffer += chunk;
-    if (this.detectBoundary(chunk)) {
-      const newlineIndex = this.buffer.indexOf("\n");
-      if (newlineIndex !== -1) {
-        if (newlineIndex === 0) {
-          this.buffer = this.buffer.substring(1);
-          return;
-        }
-        const segmentBuffer = this.buffer.substring(0, newlineIndex);
-        this.buffer = this.buffer.substring(newlineIndex + 1);
-        this.flushSegmentWithBuffer(segmentBuffer);
-        while (this.buffer.includes("\n")) {
-          const nextNewlineIndex = this.buffer.indexOf("\n");
-          if (nextNewlineIndex === 0) {
-            this.buffer = this.buffer.substring(1);
-            continue;
-          }
-          const nextSegmentBuffer = this.buffer.substring(0, nextNewlineIndex);
-          this.buffer = this.buffer.substring(nextNewlineIndex + 1);
-          this.flushSegmentWithBuffer(nextSegmentBuffer);
-        }
-      }
-    }
-  }
-  /**
-   * 检测分段边界
-   * @param chunk - 最新接收的文本块
-   * @returns 是否应该分段
-   */
-  detectBoundary(chunk) {
-    if (chunk.includes("\n")) {
-      if (this.buffer.length >= this.maxLength) {
-        this.forceSplitAtSentenceBoundary();
-      }
-      return true;
-    }
-    if (this.buffer.length >= this.maxLength) {
-      this.forceSplitAtSentenceBoundary();
-      return true;
-    }
-    return false;
   }
   /**
-   * 在句子边界强制拆分超长段落
+   * 暂停会话
    */
-  forceSplitAtSentenceBoundary() {
-    const content = this.buffer;
-    const sentenceEnders = /[。？！]/g;
-    let lastMatch = null;
-    let match = null;
-    while ((match = sentenceEnders.exec(content)) !== null) {
-      lastMatch = match;
-    }
-    if (lastMatch && lastMatch.index > this.minLength) {
-      const splitPoint = lastMatch.index + 1;
-      const firstPart = content.substring(0, splitPoint);
-      const secondPart = content.substring(splitPoint);
-      this.buffer = firstPart;
-      this.flushSegment();
-      this.buffer = secondPart;
-    } else {
-      const midPoint = Math.floor(content.length / 2);
-      const firstPart = content.substring(0, midPoint);
-      const secondPart = content.substring(midPoint);
-      this.buffer = firstPart;
-      this.flushSegment();
-      this.buffer = secondPart;
-    }
+  pause(id) {
+    this.sessions.get(id)?.pause();
   }
   /**
-   * 使用指定缓冲区内容刷新为分段
-   * @param bufferToFlush - 要分段的缓冲区内容
+   * 恢复会话
    */
-  flushSegmentWithBuffer(bufferToFlush) {
-    const content = bufferToFlush;
-    if (!content) return;
-    const isPureSymbols = /^[^\p{L}\p{N}]*$/u.test(content);
-    const isTooShort = content.length < 3;
-    if (isPureSymbols && isTooShort) {
-      return;
-    }
-    const formattedContent = MarkdownFormatter3.format(content).replace(emojiRegex3(), "");
-    if (!formattedContent) return;
-    let subSegments = [formattedContent];
-    if (formattedContent.length > this.maxLength) {
-      subSegments = this.splitLongSegment(formattedContent);
-    }
-    for (const subSegment of subSegments) {
-      if (!subSegment) continue;
-      const segment = {
-        index: this.segmentIndex++,
-        content: subSegment,
-        length: subSegment.length,
-        sent: false
-      };
-      this.segments.push(segment);
-      this.onSegmentComplete?.(segment);
+  resume(id) {
+    if (this.activeStreamId && this.activeStreamId !== id) {
+      this.pause(this.activeStreamId);
     }
+    this.sessions.get(id)?.resume();
+    this.activeStreamId = id;
   }
   /**
-   * 刷新当前缓冲区为分段
+   * 注册（兼容旧 API，但推荐直接用 createSession）
+   * 为了兼容 useMessageTTS 旧逻辑，这里可以保留一些别名，但我们会重构 hook，所以可以改变 API。
    */
-  flushSegment() {
-    const content = this.buffer.trim();
-    if (!content) {
-      this.buffer = "";
-      return;
-    }
-    const isPureSymbols = /^[^\p{L}\p{N}]*$/u.test(content);
-    const isTooShort = content.length < 3;
-    if (isPureSymbols && isTooShort) {
-      this.buffer = "";
-      return;
-    }
-    const formattedContent = MarkdownFormatter3.format(content).replace(emojiRegex3(), "");
-    if (!formattedContent) {
-      this.buffer = "";
-      return;
-    }
-    let subSegments = [formattedContent];
-    if (formattedContent.length > this.maxLength) {
-      subSegments = this.splitLongSegment(formattedContent);
-    }
-    for (const subSegment of subSegments) {
-      if (!subSegment) continue;
-      const segment = {
-        index: this.segmentIndex++,
-        content: subSegment,
-        length: subSegment.length,
-        sent: false
-      };
-      this.segments.push(segment);
-      this.onSegmentComplete?.(segment);
-    }
-    this.buffer = "";
-  }
-  /**
-   * 拆分超长分段
-   * @param segment - 超长的分段
-   * @returns 拆分后的分段数组
-   */
-  splitLongSegment(segment) {
-    const result = [];
-    let current = "";
-    for (const char of segment) {
-      current += char;
-      const shouldSplit = /[。？！，,]/.test(char);
-      if (shouldSplit && current.length <= this.maxLength) {
-        result.push(current);
-        current = "";
-      } else if (current.length >= this.maxLength) {
-        result.push(current);
-        current = "";
-      }
-    }
-    if (current) {
-      result.push(current);
-    }
-    return result.filter((s) => s.length > 0);
-  }
-  /**
-   * 完成流式输入
-   * 处理剩余的缓冲区内容
-   */
-  complete() {
-    if (this.isCompleted) return;
-    this.isCompleted = true;
-    while (this.buffer.includes("\n")) {
-      const newlineIndex = this.buffer.indexOf("\n");
-      if (newlineIndex === 0) {
-        this.buffer = this.buffer.substring(1);
-        continue;
-      }
-      const segmentBuffer = this.buffer.substring(0, newlineIndex);
-      this.buffer = this.buffer.substring(newlineIndex + 1);
-      this.flushSegmentWithBuffer(segmentBuffer);
-    }
-    if (this.buffer.trim()) {
-      this.flushSegment();
-    }
-    this.onAllComplete?.(this.segments);
-  }
-  /**
-   * 重置分段器状态
-   */
-  reset() {
-    this.buffer = "";
-    this.segmentIndex = 0;
-    this.segments = [];
-    this.isCompleted = false;
-  }
-  /**
-   * 获取当前缓冲区内容
-   */
-  getBuffer() {
-    return this.buffer;
-  }
-  /**
-   * 获取已分段的列表
-   */
-  getSegments() {
-    return this.segments;
-  }
-  /**
-   * 获取统计信息
-   */
-  getStats() {
-    return {
-      bufferLength: this.buffer.length,
-      segmentCount: this.segments.length,
-      totalChars: this.segments.reduce((sum, seg) => sum + seg.length, 0)
-    };
-  }
 };
+var StreamPlaybackManager = new StreamPlaybackManagerImpl();
 
-// src/tts/useStreamTTS.ts
-var WS_URL2 = "wss://openspeech.bytedance.com/api/v3/tts/bidirection";
-var activeInstances2 = /* @__PURE__ */ new Map();
-var sessionAudioCache = /* @__PURE__ */ new Map();
-function buildFullUrl3(url, params) {
-  const arr = [];
-  for (const key in params) {
-    if (Object.prototype.hasOwnProperty.call(params, key)) {
-      arr.push(`${key}=${encodeURIComponent(params[key])}`);
-    }
+// src/tts/Metrics.ts
+var NoopMetricsCollector = class {
+  record(_metric) {
   }
-  return `${url}?${arr.join("&")}`;
-}
-function useStreamTTS({
+};
+
+// src/tts/useMessageTTS.ts
+function useMessageTTS({
   ttsConfig,
   audioParams,
   autoPlay = true,
@@ -1273,431 +1262,427 @@ function useStreamTTS({
   onPlayPause,
   onPlayResume,
   onPlayEnd,
+  onStop,
   onError,
+  fallbackVoice,
   visualization,
-  maxSegmentLength = 150
+  streamId: externalStreamId
 }) {
-  const [isConnected, setIsConnected] = useState4(false);
-  const [isSessionStarted, setIsSessionStarted] = useState4(false);
-  const [isSynthesizing, setIsSynthesizing] = useState4(false);
-  const [isPlaying, setIsPlaying] = useState4(false);
-  const [isPaused, setIsPaused] = useState4(false);
-  const [error, setErrorState] = useState4(null);
-  const [streamText, setStreamText] = useState4("");
-  const [progress, setProgress] = useState4(0);
-  const [visualizationData, setVisualizationData] = useState4({
-    frequencyData: new Uint8Array(0),
-    timeDomainData: new Uint8Array(0)
+  const isSubscriptionMode = !!externalStreamId;
+  const [internalStreamId, setInternalStreamId] = useState3("");
+  const [isSwitchedToIndependent, setIsSwitchedToIndependent] = useState3(false);
+  const streamId = isSwitchedToIndependent ? internalStreamId : externalStreamId || internalStreamId;
+  const [state, setState] = useState3({
+    isPlaying: false,
+    isPaused: false,
+    isSynthesizing: false,
+    progress: 0,
+    visualizationData: {
+      frequencyData: new Uint8Array(0),
+      timeDomainData: new Uint8Array(0)
+    },
+    error: null,
+    isConnected: false,
+    isSessionStarted: false,
+    isStreamFinished: false
   });
-  const instanceId = useRef4(`tts-stream-${Date.now()}-${Math.random().toString(36).slice(2)}`).current;
-  const clientRef = useRef4(null);
-  const audioRef = useRef4(null);
-  const audioContextRef = useRef4(null);
-  const analyserRef = useRef4(null);
-  const sourceRef = useRef4(null);
-  const audioUrlRef = useRef4(null);
-  const streamTextRef = useRef4("");
-  const isConnectedRef = useRef4(false);
-  const isSessionStartedRef = useRef4(false);
-  const calledSessionStartedRef = useRef4(false);
-  const splitterRef = useRef4(null);
-  const segmentQueueRef = useRef4([]);
-  const isSendingRef = useRef4(false);
-  const sessionAudioBuffersRef = useRef4([]);
-  const isStreamFinishedRef = useRef4(false);
-  const isSessionFinishedRef = useRef4(false);
-  const resolveAllSegmentsSentRef = useRef4(null);
-  const currentVoiceRef = useRef4("");
-  const initAudioContext = useCallback4(() => {
-    if (!audioRef.current) return;
-    if (!audioContextRef.current) {
-      const AudioContextClass = window.AudioContext || window.webkitAudioContext;
-      audioContextRef.current = new AudioContextClass();
-    }
-    if (audioContextRef.current.state === "suspended") {
-      audioContextRef.current.resume();
-    }
-    if (!analyserRef.current) {
-      analyserRef.current = audioContextRef.current.createAnalyser();
-      analyserRef.current.fftSize = visualization?.fftSize || 256;
-    }
-    if (!sourceRef.current) {
-      try {
-        sourceRef.current = audioContextRef.current.createMediaElementSource(audioRef.current);
-        sourceRef.current.connect(analyserRef.current);
-        analyserRef.current.connect(audioContextRef.current.destination);
-      } catch (e) {
-      }
+  const [error, setErrorState] = useState3(null);
+  const isFallbackRef = useRef3(false);
+  const fallbackUtteranceRef = useRef3(null);
+  const currentTextRef = useRef3("");
+  useEffect2(() => {
+    if (!streamId) return;
+    const session = StreamPlaybackManager.getSession(streamId);
+    if (session) {
+      const unsubscribe = session.subscribe((newState) => {
+        setState(newState);
+        if (newState.error) setErrorState(newState.error);
+      });
+      return () => {
+        unsubscribe();
+      };
     }
-  }, [visualization?.fftSize]);
-  const cleanupAudio = useCallback4(() => {
-    if (audioUrlRef.current) {
-      URL.revokeObjectURL(audioUrlRef.current);
-      audioUrlRef.current = null;
-    }
-    if (audioRef.current) {
-      audioRef.current.onerror = null;
-      audioRef.current.onended = null;
-      audioRef.current.onpause = null;
-      audioRef.current.onplay = null;
-      audioRef.current.ontimeupdate = null;
-      audioRef.current.pause();
-      audioRef.current.src = "";
-      audioRef.current = null;
-    }
-    if (sourceRef.current) {
-      try {
-        sourceRef.current.disconnect();
-      } catch (e) {
+  }, [streamId]);
+  const stop = useCallback3(() => {
+    if (streamId) {
+      StreamPlaybackManager.stop(streamId);
+      if (!isSubscriptionMode || isSwitchedToIndependent) {
+        setInternalStreamId("");
+        setIsSwitchedToIndependent(false);
       }
-      sourceRef.current = null;
     }
-  }, []);
-  const stopOthers = useCallback4(() => {
-    activeInstances2.forEach((instance, id) => {
-      if (id !== instanceId) {
-        instance.pause();
-      }
-    });
-  }, [instanceId]);
-  const pause = useCallback4(() => {
-    if (audioRef.current) {
-      audioRef.current.pause();
+    if (fallbackUtteranceRef.current) {
+      window.speechSynthesis.cancel();
+      fallbackUtteranceRef.current = null;
     }
-    setIsPaused(true);
-    setIsPlaying(false);
-    onPlayPause?.();
-  }, [onPlayPause]);
-  const resume = useCallback4(() => {
-    stopOthers();
-    if (audioRef.current) {
-      audioRef.current.play();
-    }
-    setIsPaused(false);
-    setIsPlaying(true);
-    onPlayResume?.();
-    activeInstances2.set(instanceId, { pause });
-  }, [stopOthers, instanceId, pause, onPlayResume]);
-  const sendNextSegment = useCallback4(() => {
-    if (!clientRef.current || !isSessionStartedRef.current || isSendingRef.current || isSessionFinishedRef.current) {
-      return;
+    isFallbackRef.current = false;
+    setState((prev) => ({
+      ...prev,
+      isPlaying: false,
+      isPaused: false,
+      isSynthesizing: false,
+      progress: 0
+    }));
+    onStop?.();
+  }, [streamId, isSubscriptionMode, isSwitchedToIndependent, onStop]);
+  const pause = useCallback3(() => {
+    if (isFallbackRef.current) {
+      window.speechSynthesis.pause();
+      setState((prev) => ({ ...prev, isPaused: true, isPlaying: false }));
+      onPlayPause?.();
+    } else if (streamId) {
+      StreamPlaybackManager.pause(streamId);
     }
-    if (segmentQueueRef.current.length === 0) {
-      if (isStreamFinishedRef.current && !isSessionFinishedRef.current) {
-        console.log("[useStreamTTS] All segments sent, finishing session");
-        isSessionFinishedRef.current = true;
-        clientRef.current.finishSession();
-        resolveAllSegmentsSentRef.current?.();
+  }, [streamId, onPlayPause]);
+  const resume = useCallback3(() => {
+    if (isFallbackRef.current) {
+      window.speechSynthesis.resume();
+      setState((prev) => ({ ...prev, isPaused: false, isPlaying: true }));
+      onPlayResume?.();
+    } else if (streamId) {
+      const session = StreamPlaybackManager.getSession(streamId);
+      if (session) {
+        StreamPlaybackManager.resume(streamId);
+      } else {
+        console.log(
+          "[useMessageTTS] Session not found, resetting pause state"
+        );
+        setState((prev) => ({ ...prev, isPaused: false, isPlaying: false }));
       }
-      return;
     }
-    isSendingRef.current = true;
-    const segment = segmentQueueRef.current.shift();
-    console.log(`[useStreamTTS] Sending segment ${segment.index}: ${segment.content.substring(0, 30)}...`);
-    clientRef.current.sendText(segment.content);
-    segment.sent = true;
-    isSendingRef.current = false;
-    setTimeout(() => sendNextSegment(), 0);
-  }, []);
-  const stop = useCallback4(() => {
-    if (clientRef.current) {
-      clientRef.current.close();
-      clientRef.current = null;
-    }
-    cleanupAudio();
-    setIsConnected(false);
-    isConnectedRef.current = false;
-    setIsSessionStarted(false);
-    isSessionStartedRef.current = false;
-    calledSessionStartedRef.current = false;
-    setIsPlaying(false);
-    setIsPaused(false);
-    setIsSynthesizing(false);
-    setProgress(0);
-    activeInstances2.delete(instanceId);
-    streamTextRef.current = "";
-    setStreamText("");
-    segmentQueueRef.current = [];
-    isSendingRef.current = false;
-    sessionAudioBuffersRef.current = [];
-    isStreamFinishedRef.current = false;
-    isSessionFinishedRef.current = false;
-    splitterRef.current?.reset();
-  }, [cleanupAudio, instanceId]);
-  const connect = useCallback4(async () => {
-    stop();
-    setErrorState(null);
-    setProgress(0);
-    sessionAudioBuffersRef.current = [];
-    isStreamFinishedRef.current = false;
-    streamTextRef.current = "";
-    setStreamText("");
-    segmentQueueRef.current = [];
-    isSendingRef.current = false;
-    isSessionStartedRef.current = false;
-    calledSessionStartedRef.current = false;
-    setIsSessionStarted(false);
-    const voice = audioParams?.speaker || "zh_female_vv_uranus_bigtts";
-    currentVoiceRef.current = voice;
-    const startTime = Date.now();
-    metricsCollector.record({
-      name: "tts_request",
-      labels: { voice, text_length: 0 },
-      value: 1,
-      timestamp: startTime
-    });
-    try {
-      const audio = new Audio();
-      audio.crossOrigin = "anonymous";
-      audioRef.current = audio;
-      audio.onplay = () => {
-        setIsPlaying(true);
-        setIsPaused(false);
+  }, [streamId, onPlayResume]);
+  const togglePlay = useCallback3(() => {
+    if (state.isPlaying) {
+      pause();
+    } else {
+      resume();
+    }
+  }, [state.isPlaying, pause, resume]);
+  const playFallback = useCallback3(
+    (text) => {
+      console.warn("[useMessageTTS] Switching to fallback TTS");
+      stop();
+      isFallbackRef.current = true;
+      setErrorState(null);
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.rate = audioParams?.speech_rate || 1;
+      const voices = window.speechSynthesis.getVoices();
+      const zhVoice = voices.find((v) => v.lang.includes("zh"));
+      if (zhVoice) utterance.voice = zhVoice;
+      utterance.onstart = () => {
+        setState((prev) => ({ ...prev, isPlaying: true, isPaused: false }));
         onPlayStart?.();
-        initAudioContext();
-        activeInstances2.set(instanceId, { pause });
       };
-      audio.onended = () => {
-        setIsPlaying(false);
-        setIsPaused(false);
+      utterance.onend = () => {
+        setState((prev) => ({
+          ...prev,
+          isPlaying: false,
+          isPaused: false,
+          progress: 100
+        }));
         onPlayEnd?.();
-        activeInstances2.delete(instanceId);
       };
-      audio.onerror = (e) => {
-        console.error("[useStreamTTS] Audio playback error:", e, audio.error);
-        setErrorState(audio.error?.message || "Audio playback error");
-        onError?.(new Error(audio.error?.message || "Audio playback error"));
-      };
-      audio.ontimeupdate = () => {
-        let duration = audio.duration;
-        if (!isFinite(duration) && audio.buffered.length > 0) {
-          duration = audio.buffered.end(audio.buffered.length - 1);
-        }
-        if (isFinite(duration) && duration > 0) {
-          setProgress(audio.currentTime / duration * 100);
-        }
+      utterance.onerror = (e) => {
+        console.error("[useMessageTTS] Fallback TTS failed", e);
+        setErrorState("Fallback TTS failed");
+        onError?.(new Error("Fallback TTS failed"));
       };
-      clientRef.current = WebsocketMSE3({ autoStartSession: false });
-      splitterRef.current = new StreamingTextSplitter({
-        maxLength: maxSegmentLength,
-        onSegmentComplete: (segment) => {
-          segmentQueueRef.current.push(segment);
-          console.log(`[useStreamTTS] Segment ${segment.index} queued (${segment.length} chars)`);
-          if (isSessionStartedRef.current) {
-            sendNextSegment();
-          }
-        },
-        onAllComplete: () => {
-          console.log(`[useStreamTTS] All segments completed, total: ${segmentQueueRef.current.length} in queue`);
+      fallbackUtteranceRef.current = utterance;
+      window.speechSynthesis.speak(utterance);
+    },
+    [audioParams, onError, onPlayEnd, onPlayStart, stop]
+  );
+  const handleError = useCallback3(
+    (text, failedVoice) => {
+      if (fallbackVoice && failedVoice !== fallbackVoice) {
+        console.warn(
+          `[useMessageTTS] Voice ${failedVoice} failed, switching to fallback voice ${fallbackVoice}`
+        );
+        const newId = internalStreamId || `msg-tts-retry-${Date.now()}`;
+        setInternalStreamId(newId);
+        const session = StreamPlaybackManager.createSession(newId, {
+          ttsConfig,
+          audioParams: { ...audioParams, speaker: fallbackVoice },
+          autoPlay,
+          metricsCollector,
+          visualization,
+          onPlayStart,
+          onPlayPause,
+          onPlayResume,
+          onPlayEnd,
+          onError: () => playFallback(text)
+        });
+        session.play(text);
+      } else {
+        playFallback(text);
+      }
+    },
+    [
+      fallbackVoice,
+      playFallback,
+      ttsConfig,
+      audioParams,
+      autoPlay,
+      metricsCollector,
+      visualization,
+      onPlayStart,
+      onPlayPause,
+      onPlayResume,
+      onPlayEnd,
+      internalStreamId
+    ]
+  );
+  const play = useCallback3(
+    async (text) => {
+      let shouldSwitchToIndependent = false;
+      if (isSubscriptionMode) {
+        const session2 = StreamPlaybackManager.getSession(externalStreamId || "");
+        if (!session2) {
+          console.log(
+            "[useMessageTTS] Stream session not found, switching to independent play mode"
+          );
+          shouldSwitchToIndependent = true;
+          setIsSwitchedToIndependent(true);
+        } else if (session2.state.isStreamFinished) {
+          console.log(
+            "[useMessageTTS] Stream finished, switching to independent play mode"
+          );
+          shouldSwitchToIndependent = true;
+          setIsSwitchedToIndependent(true);
+        } else if (session2.state.isSynthesizing || session2.state.isPlaying) {
+          console.warn(
+            "[useMessageTTS] play() called in subscription mode while streaming, ignoring"
+          );
+          return;
+        } else {
+          console.log(
+            "[useMessageTTS] Stream not active, switching to independent play mode"
+          );
+          shouldSwitchToIndependent = true;
+          setIsSwitchedToIndependent(true);
         }
-      });
-      const url = clientRef.current.start({
-        url: buildFullUrl3(WS_URL2, {
-          api_access_key: `Jwt; ${ttsConfig.token}`,
-          api_app_key: ttsConfig.appid,
-          api_resource_id: ttsConfig.resourceId || "seed-tts-2.0"
-        }),
-        config: {
-          user: {
-            uid: `req-${Date.now()}`
-          },
-          namespace: ttsConfig.namespace || "BidirectionalTTS",
-          req_params: {
-            speaker: voice,
-            audio_params: {
-              sample_rate: audioParams?.sample_rate || 24e3,
-              format: audioParams?.format || "mp3",
-              speech_rate: audioParams?.speech_rate,
-              pitch_rate: audioParams?.pitch_rate,
-              loudness_rate: audioParams?.loudness_rate
-            },
-            additions: JSON.stringify({
-              enable_language_detector: true,
-              disable_markdown_filter: true,
-              enable_latex_tn: true
-            })
-          }
-        },
-        // ===== 关键回调 =====
-        onStart: () => {
-          setIsConnected(true);
-          isConnectedRef.current = true;
-          console.log("[useStreamTTS] WebSocket connected, waiting for text...");
-        },
-        onSessionStarted: () => {
-          setIsSessionStarted(true);
-          isSessionStartedRef.current = true;
-          console.log("[useStreamTTS] Session started, can send text now");
-          if (segmentQueueRef.current.length > 0) {
-            sendNextSegment();
-          }
-        },
-        onMessage: (data) => {
-          setIsSynthesizing(true);
-          if (sessionAudioBuffersRef.current.length === 0) {
-            metricsCollector.record({
-              name: "tts_latency",
-              labels: { stage: "first_packet", voice },
-              value: Date.now() - startTime,
-              timestamp: Date.now()
-            });
-          }
-          const buffer = data instanceof ArrayBuffer ? data.slice(0) : new Uint8Array(data).buffer;
-          sessionAudioBuffersRef.current.push(buffer);
-        },
-        onSessionFinished: () => {
-          setIsSynthesizing(false);
-          setIsSessionStarted(false);
-          isSessionStartedRef.current = false;
-          calledSessionStartedRef.current = false;
-          if (sessionAudioBuffersRef.current.length > 0 && streamTextRef.current) {
-            const speed = audioParams?.speech_rate || 0;
-            const cacheKey = TTSCache.generateKey(streamTextRef.current, voice, speed);
-            TTSCache.set(cacheKey, [...sessionAudioBuffersRef.current]);
-            sessionAudioCache.set(instanceId, {
-              streamText: streamTextRef.current,
-              audioBuffers: [...sessionAudioBuffersRef.current],
-              timestamp: Date.now(),
-              voice,
-              speed
-            });
-            console.log(`[useStreamTTS] Session finished, cached ${sessionAudioBuffersRef.current.length} audio buffers`);
-          }
-          metricsCollector.record({
-            name: "tts_synthesis_finished",
-            labels: { voice, text_length: streamTextRef.current.length },
-            value: Date.now() - startTime,
-            timestamp: Date.now()
-          });
-        },
+      }
+      currentTextRef.current = text;
+      stop();
+      setErrorState(null);
+      isFallbackRef.current = false;
+      const id = `msg-tts-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      const session = StreamPlaybackManager.createSession(id, {
+        ttsConfig,
+        audioParams,
+        autoPlay,
+        metricsCollector,
+        visualization,
+        onPlayStart,
+        onPlayPause,
+        onPlayResume,
+        onPlayEnd,
         onError: (err) => {
-          console.error("[useStreamTTS] TTS error:", err);
-          setErrorState(err.msg || "TTS error");
-          onError?.(new Error(err.msg || "TTS error"));
-          setIsSynthesizing(false);
+          handleError(text, audioParams?.speaker || "");
         }
       });
-      audioUrlRef.current = url;
-      audio.src = url;
-      if (autoPlay) {
-        try {
-          await audio.play();
-        } catch (e) {
-          console.warn("[useStreamTTS] Autoplay blocked:", e);
-        }
+      setInternalStreamId(id);
+      await session.play(text);
+    },
+    [
+      isSubscriptionMode,
+      externalStreamId,
+      stop,
+      ttsConfig,
+      audioParams,
+      autoPlay,
+      metricsCollector,
+      visualization,
+      onPlayStart,
+      onPlayPause,
+      onPlayResume,
+      onPlayEnd,
+      handleError
+    ]
+  );
+  const seek = useCallback3(
+    (percentage) => {
+      if (streamId) {
+        StreamPlaybackManager.getSession(streamId)?.seek(percentage);
       }
-    } catch (err) {
-      console.error("[useStreamTTS] Connect error:", err);
-      setErrorState(String(err));
-      onError?.(err instanceof Error ? err : new Error(String(err)));
-    }
+    },
+    [streamId]
+  );
+  const getFrequencyData = useCallback3(
+    () => state.visualizationData.frequencyData,
+    [state.visualizationData]
+  );
+  const getTimeDomainData = useCallback3(
+    () => state.visualizationData.timeDomainData,
+    [state.visualizationData]
+  );
+  const isStreamActive = !!(externalStreamId && (state.isPlaying || state.isPaused || state.isSynthesizing));
+  const canResume = useCallback3(() => {
+    if (!streamId) return false;
+    const session = StreamPlaybackManager.getSession(streamId);
+    return !!session;
+  }, [streamId]);
+  return {
+    isPlaying: state.isPlaying,
+    isPaused: state.isPaused,
+    isSynthesizing: state.isSynthesizing,
+    progress: state.progress,
+    error,
+    play,
+    pause,
+    resume,
+    stop,
+    togglePlay,
+    seek,
+    getFrequencyData,
+    getTimeDomainData,
+    visualizationData: state.visualizationData,
+    isStreamActive,
+    streamState: state,
+    canResume
+  };
+}
+
+// src/tts/useStreamTTS.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+function useStreamTTS({
+  ttsConfig,
+  audioParams,
+  autoPlay = true,
+  metricsCollector = new NoopMetricsCollector(),
+  onPlayStart,
+  onPlayPause,
+  onPlayResume,
+  onPlayEnd,
+  onError,
+  visualization,
+  maxSegmentLength = 150
+}) {
+  const [streamId, setStreamId] = useState4("");
+  const streamIdRef = useRef4("");
+  const [state, setState] = useState4({
+    isPlaying: false,
+    isPaused: false,
+    isSynthesizing: false,
+    progress: 0,
+    visualizationData: {
+      frequencyData: new Uint8Array(0),
+      timeDomainData: new Uint8Array(0)
+    },
+    error: null,
+    isConnected: false,
+    isSessionStarted: false,
+    isStreamFinished: false
+  });
+  const [streamText, setStreamText] = useState4("");
+  const streamTextRef = useRef4("");
+  const connect = useCallback4(async () => {
+    const newStreamId = `tts-stream-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    setStreamId(newStreamId);
+    streamIdRef.current = newStreamId;
+    streamTextRef.current = "";
+    setStreamText("");
+    const session = StreamPlaybackManager.createSession(newStreamId, {
+      ttsConfig,
+      audioParams,
+      autoPlay,
+      metricsCollector,
+      visualization,
+      maxSegmentLength,
+      onPlayStart,
+      onPlayPause,
+      onPlayResume,
+      onPlayEnd,
+      onError: (err) => {
+        setState((prev) => ({ ...prev, error: err.message }));
+        onError?.(err);
+      }
+    });
+    await session.connect();
+    return newStreamId;
   }, [
     ttsConfig,
     audioParams,
     autoPlay,
-    stop,
-    instanceId,
-    onPlayStart,
-    onPlayEnd,
-    initAudioContext,
-    pause,
     metricsCollector,
+    visualization,
     maxSegmentLength,
-    sendNextSegment,
+    onPlayStart,
+    onPlayPause,
+    onPlayResume,
+    onPlayEnd,
     onError
   ]);
+  useEffect3(() => {
+    if (!streamId) return;
+    const session = StreamPlaybackManager.getSession(streamId);
+    if (!session) return;
+    const unsubscribe = session.subscribe((newState) => {
+      setState(newState);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [streamId]);
   const onMessage = useCallback4((chunk) => {
-    if (!chunk) return;
+    if (!streamIdRef.current) return;
     streamTextRef.current += chunk;
     setStreamText(streamTextRef.current);
-    if (!calledSessionStartedRef.current && !isSessionStartedRef.current && clientRef.current && isConnectedRef.current) {
-      console.log("[useStreamTTS] First text received, starting session...");
-      calledSessionStartedRef.current = true;
-      clientRef.current.startSession();
-    }
-    splitterRef.current?.onChunk(chunk);
+    const session = StreamPlaybackManager.getSession(streamIdRef.current);
+    session?.handleStreamChunk(chunk);
   }, []);
   const finishStream = useCallback4(async () => {
-    isStreamFinishedRef.current = true;
-    splitterRef.current?.complete();
-    console.log(`[useStreamTTS] Stream finished, ${segmentQueueRef.current.length} segments remaining in queue`);
-    if (segmentQueueRef.current.length > 0 || isSendingRef.current) {
-      await new Promise((resolve) => {
-        resolveAllSegmentsSentRef.current = resolve;
-      });
-    } else if (clientRef.current && isSessionStartedRef.current && !isSessionFinishedRef.current) {
-      isSessionFinishedRef.current = true;
-      clientRef.current.finishSession();
-    }
+    if (!streamIdRef.current) return;
+    const session = StreamPlaybackManager.getSession(streamIdRef.current);
+    await session?.finishStream();
   }, []);
-  const seek = useCallback4((percentage) => {
-    if (audioRef.current) {
-      let duration = audioRef.current.duration;
-      if (!isFinite(duration) && audioRef.current.buffered.length > 0) {
-        duration = audioRef.current.buffered.end(audioRef.current.buffered.length - 1);
-      }
-      if (isFinite(duration) && duration > 0) {
-        const time = percentage / 100 * duration;
-        if (isFinite(time)) {
-          audioRef.current.currentTime = time;
-          setProgress(percentage);
-        }
-      }
+  const pause = useCallback4(() => {
+    if (streamIdRef.current) {
+      StreamPlaybackManager.pause(streamIdRef.current);
     }
   }, []);
-  const getFrequencyData = useCallback4(() => {
-    if (!analyserRef.current) return new Uint8Array(0);
-    const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
-    analyserRef.current.getByteFrequencyData(dataArray);
-    return dataArray;
+  const resume = useCallback4(() => {
+    if (streamIdRef.current) {
+      StreamPlaybackManager.resume(streamIdRef.current);
+    }
   }, []);
-  const getTimeDomainData = useCallback4(() => {
-    if (!analyserRef.current) return new Uint8Array(0);
-    const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
-    analyserRef.current.getByteTimeDomainData(dataArray);
-    return dataArray;
+  const stop = useCallback4(() => {
+    if (streamIdRef.current) {
+      StreamPlaybackManager.stop(streamIdRef.current);
+      setStreamId("");
+      streamIdRef.current = "";
+    }
   }, []);
-  useEffect3(() => {
-    if (!visualization?.enabled) return;
-    let animId;
-    let lastUpdate = 0;
-    const interval = visualization.refreshInterval || 0;
-    const update = (timestamp) => {
-      if (isPlaying && !isPaused) {
-        if (timestamp - lastUpdate >= interval) {
-          setVisualizationData({
-            frequencyData: getFrequencyData(),
-            timeDomainData: getTimeDomainData()
-          });
-          lastUpdate = timestamp;
-        }
-        animId = requestAnimationFrame(update);
-      }
-    };
-    if (isPlaying && !isPaused) {
-      animId = requestAnimationFrame(update);
+  const seek = useCallback4((percentage) => {
+    if (streamIdRef.current) {
+      StreamPlaybackManager.getSession(streamIdRef.current)?.seek(percentage);
     }
-    return () => {
-      if (animId) cancelAnimationFrame(animId);
-    };
-  }, [isPlaying, isPaused, visualization, getFrequencyData, getTimeDomainData]);
+  }, []);
   useEffect3(() => {
     return () => {
-      stop();
-      if (audioContextRef.current) {
-        audioContextRef.current.close();
+      if (streamIdRef.current) {
+        StreamPlaybackManager.stop(streamIdRef.current);
       }
     };
-  }, [stop]);
+  }, []);
+  const getFrequencyData = useCallback4(
+    () => state.visualizationData.frequencyData,
+    [state.visualizationData]
+  );
+  const getTimeDomainData = useCallback4(
+    () => state.visualizationData.timeDomainData,
+    [state.visualizationData]
+  );
   return {
-    isConnected,
-    isSessionStarted,
-    isSynthesizing,
-    isPlaying,
-    isPaused,
-    error,
+    streamId,
+    isConnected: state.isConnected,
+    isSessionStarted: state.isSessionStarted,
+    isSynthesizing: state.isSynthesizing,
+    isPlaying: state.isPlaying,
+    isPaused: state.isPaused,
+    error: state.error,
     streamText,
-    progress,
+    progress: state.progress,
     connect,
     onMessage,
     finishStream,
@@ -1707,23 +1692,9 @@ function useStreamTTS({
     seek,
     getFrequencyData,
     getTimeDomainData,
-    visualizationData
+    visualizationData: state.visualizationData
   };
 }
-function getSessionAudioCache(instanceId) {
-  return sessionAudioCache.get(instanceId);
-}
-function clearSessionAudioCache(instanceId) {
-  sessionAudioCache.delete(instanceId);
-}
-function findSessionCacheByText(streamText, voice, speed) {
-  for (const entry of sessionAudioCache.values()) {
-    if (entry.streamText === streamText && entry.voice === voice && entry.speed === speed) {
-      return entry;
-    }
-  }
-  return void 0;
-}
 
 // src/components/AudioWaveVisualizer.tsx
 import { useEffect as useEffect4, useRef as useRef5 } from "react";
@@ -2098,10 +2069,8 @@ var AudioProgressBar_default = AudioProgressBar;
 export {
   AudioProgressBar_default as AudioProgressBar,
   AudioWaveVisualizer_default as AudioWaveVisualizer,
+  StreamPlaybackManager,
   StreamingTextSplitter,
-  clearSessionAudioCache,
-  findSessionCacheByText,
-  getSessionAudioCache,
   splitTextByDelimiters,
   useMessageTTS,
   useStreamTTS,