fix(#1195): useStep5Voice增加克隆音色试听播放逻辑，预留后端接口位置

apps/web/src/pages/generate/hooks/useStep5Voice.tsx

@@ -2,6 +2,7 @@
  * Step 5 配音选择 Hook
  * 封装 AI 推荐、预设音色试听、TTS 自定义合成、存为素材等逻辑
  */
+import { useState, useRef, useCallback } from "react"
 import { message } from "antd"
 import type { VoiceClone } from "@/api/voice-clone"
 import { VOICE_GENDER_ICON, CLONE_STATUS_CONFIG } from "../constants"
@@ -100,6 +101,40 @@ export function useStep5Voice({
     onCloneModalOpenChange,
   })
 
+  /* ── 克隆音色试听播放 ── */
+  const [playingCloneVoice, setPlayingCloneVoice] = useState<string | null>(null)
+  const cloneAudioRef = useRef<HTMLAudioElement | null>(null)
+
+  const handlePlayCloneSample = useCallback(
+    (voice: VoiceClone) => {
+      if (playingCloneVoice === voice.id) {
+        cloneAudioRef.current?.pause()
+        cloneAudioRef.current = null
+        setPlayingCloneVoice(null)
+        return
+      }
+      cloneAudioRef.current?.pause()
+      // TODO: 后端克隆音色试听接口出来后，改为调用接口获取试听音频
+      // 目前使用 sample_url 字段，如果没有则提示
+      const audioUrl = voice.sample_url
+      if (!audioUrl) {
+        message.warning("该克隆音色暂无试听音频")
+        return
+      }
+      const audio = new Audio(audioUrl)
+      cloneAudioRef.current = audio
+      audio.play().catch(() => {
+        message.error("播放失败，请检查网络")
+      })
+      audio.onended = () => {
+        setPlayingCloneVoice(null)
+        cloneAudioRef.current = null
+      }
+      setPlayingCloneVoice(voice.id)
+    },
+    [playingCloneVoice],
+  )
+
   const handleCloneSuccess = (voice: VoiceClone) => {
     rawCloneSuccess(voice)
     message.success("音色克隆成功！")
@@ -124,6 +159,9 @@ export function useStep5Voice({
     // 音频播放
     playingVoice,
     toggleVoicePlay,
+    // 克隆音色试听播放
+    playingCloneVoice,
+    handlePlayCloneSample,
     // 预设音色操作
     handleSelectPresetVoice,
     handleSelectCloneVoice,
@@ -163,3 +201,4 @@ export function useStep5Voice({
 }
 
 export default useStep5Voice
+