diff --git a/apps/web/src/pages/editing-planner/components/TtsPanel/hooks/useTtsPanel.ts b/apps/web/src/pages/editing-planner/components/TtsPanel/hooks/useTtsPanel.ts index 00490c0f7..65609d2f6 100644 --- a/apps/web/src/pages/editing-planner/components/TtsPanel/hooks/useTtsPanel.ts +++ b/apps/web/src/pages/editing-planner/components/TtsPanel/hooks/useTtsPanel.ts @@ -1,4 +1,4 @@ -import { useState, useCallback, useEffect, useRef } from "react" +import { useState, useCallback, useEffect, useRef, type ChangeEvent } from "react" import { message } from "antd" import type { TtsConfig, TtsMode } from "../../../types" import { DEFAULT_TTS_CONFIG } from "../../../types" @@ -19,9 +19,11 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti /* ── 试听状态 ── */ const [previewLoading, setPreviewLoading] = useState(false) const audioRef = useRef(null) + const mountedRef = useRef(true) /* ── 加载音色列表 ── */ useEffect(() => { + mountedRef.current = true if (!open) return setVoicesLoading(true) getTtsVoices() @@ -40,7 +42,7 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti /* ── 文本输入 ── */ const handleTextChange = useCallback( - (e: React.ChangeEvent) => { + (e: ChangeEvent) => { const text = e.target.value.slice(0, 5000) onChange({ ...config, text }) }, @@ -102,12 +104,13 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti speed: config.speed, pitch: config.pitch, }) + if (!mountedRef.current) return audioRef.current?.pause() const audio = new Audio(res.audio_url) audioRef.current = audio audio.play().catch(() => message.error("播放失败")) audio.onended = () => { - audioRef.current = null + if (mountedRef.current) audioRef.current = null } message.success("试听播放中") } catch { @@ -124,6 +127,7 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti /* ── 关闭时停止音频 ── */ const handleClose = useCallback(() => { + mountedRef.current = false audioRef.current?.pause() audioRef.current = null onClose() @@ -144,4 +148,4 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti handleReset, handleClose, } -} \ No newline at end of file +}