From 183e2a3399dbdbdd5bb97b5c8221d43041f80665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=B1=BC=E5=BC=80=E5=8F=91?= <git@xiaoyu.com>
Date: Wed, 22 Apr 2026 08:00:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9F=B3=E9=A2=91=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=BA=93=E6=92=AD=E6=94=BE=E6=8C=89=E9=92=AE=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE/=E6=9A=82=E5=81=9C=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VoiceMaterialLibrary.tsx                  | 36 +++++++++++++++----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx b/tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx
index 8ee0c13..a6f3387 100644
--- a/tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx
+++ b/tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx
@@ -38,6 +38,10 @@ export default function VoiceMaterialLibrary() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const pollingIds = useRef<Set<string>>(new Set());
 
+  // 音频播放状态
+  const [playingId, setPlayingId] = useState<string | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
   const {
     voiceMaterials,
     avatarMaterials,
@@ -504,20 +508,38 @@ export default function VoiceMaterialLibrary() {
                           width: 36,
                           height: 36,
                           borderRadius: '50%',
-                          background: 'var(--bg-secondary)',
+                          background: playingId === m.id ? 'var(--primary-color)' : 'var(--bg-secondary)',
+                          color: playingId === m.id ? '#fff' : 'inherit',
                           display: 'flex',
                           alignItems: 'center',
                           justifyContent: 'center',
                         }}
                         onClick={() => {
-                          const audio = new Audio(m.sourceUrl);
-                          audio.play();
+                          if (playingId === m.id) {
+                            audioRef.current?.pause();
+                            setPlayingId(null);
+                          } else {
+                            audioRef.current?.pause();
+                            const audio = new Audio(m.sourceUrl);
+                            audio.onended = () => setPlayingId(null);
+                            audio.onpause = () => setPlayingId(null);
+                            audio.play();
+                            audioRef.current = audio;
+                            setPlayingId(m.id);
+                          }
                         }}
-                        title="播放"
+                        title={playingId === m.id ? '暂停' : '播放'}
                       >
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-                          <polygon points="5 3 19 12 5 21 5 3" />
-                        </svg>
+                        {playingId === m.id ? (
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                            <rect x="6" y="4" width="4" height="16" rx="1" />
+                            <rect x="14" y="4" width="4" height="16" rx="1" />
+                          </svg>
+                        ) : (
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                            <polygon points="5 3 19 12 5 21 5 3" />
+                          </svg>
+                        )}
                       </button>
                     )}
                     <button