[fix]: remove frontend ref audio.

frontend/src/assets/ref_audios/bys_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:742e4310a8635740e8cfee99b10c14c40acb189e1985283991447d87631685ed
-size 418604

frontend/src/assets/ref_audios/cove_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:2879a08a134b812245cf67afb4cb1a330d4fc59b43bb68a2fe20efbab10df759
-size 479404

frontend/src/assets/ref_audios/doubao_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a5c8581b8b7a857f5ecbdce36a558b12f7eefc36dbbc96e7cf7a99615627f6e6
-size 844878

frontend/src/assets/ref_audios/ellen_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:692552ea483214b0b08e66f6ff684696ecd9fc96da40ee6925415359bdff83d0
-size 599084

frontend/src/assets/ref_audios/juniper_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b59af2dc6f7163084b9d72a7ceb60fe03789c096129d1007231c9514c5df7fd7
-size 314924

frontend/src/assets/ref_audios/luoxiang_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f9c271fe6e3590741a38b21bdd4462bd87a8a4c4711013e90071d761a41f18c3
-size 316204

frontend/src/assets/ref_audios/mabaoguo_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:65f76b00d87c2598f6a2ba59716cf58af6e2f6682ae79a90496771be91f3515f
-size 476238

frontend/src/assets/ref_audios/maple_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:da780b24686c3b065a594d6d35380a99bac519608e4c93753acf165b68041e50
-size 422444

frontend/src/assets/ref_audios/mayun_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3e55c3989e5f4910a039d2e3c5d769b30129a4d7c0c97f0c6a905009382a9456
-size 630274

frontend/src/assets/ref_audios/shenyi_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4a43131724444f933a800971ce50515d91d31e333287ad40e10a7d4a4e1eaef0
-size 661518

frontend/src/assets/ref_audios/trump_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:20735d336d61194773c248982937872515589f0987efb2827f6addbc391faa11
-size 427244

frontend/src/assets/ref_audios/yangmi_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7b37d93794958b71184b48c6358eadcdc7cc782805761ac867c2c7bd32081426
-size 865038

frontend/src/assets/ref_audios/zhoujielun_ref.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:584e95f902b3b244c8ee46eee54f4238d0286d3d9687b753f738b353b7267c09
-size 475278

frontend/src/views/Welcome/index.vue

@@ -2,9 +2,9 @@
 
 import router from "@/router.ts";
 import { useSettingsStore } from "@/stores/config.ts";
-import { onMounted, ref, reactive, computed, h } from "vue";
+import { onMounted, onUnmounted, ref, reactive, computed, h } from "vue";
 import { Modal } from 'ant-design-vue';
-import { SoundTwoTone } from "@ant-design/icons-vue";
+import { SoundTwoTone, SoundOutlined } from "@ant-design/icons-vue";
 import axios from "axios";
 import PromptText from "./Components/PromptText.vue";
 
@@ -202,11 +202,82 @@ const togglePopover = (item: string) => {
 const popoverVisible = ref<boolean>(false);
 const promptModelOpen = ref<boolean>(false);
 
-const playRefAudio = (id: string) => {
+// 音频播放状态管理
+const currentPlayingId = ref<string | null>(null);
+const currentAudio = ref<HTMLAudioElement | null>(null);
+
+// 修改音频播放逻辑
+const playRefAudio = async (id: string, e: Event) => {
     console.log('Playing reference audio for role:', id);
-    // TODO: Implement audio playback logic
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    try {
+        // 如果点击的是当前正在播放的音频，则停止播放
+        if (currentPlayingId.value === id && currentAudio.value) {
+            currentAudio.value.pause();
+            currentAudio.value = null;
+            currentPlayingId.value = null;
+            console.log('Audio stopped');
+            return;
+        }
+
+        // 如果有其他音频正在播放，先停止它
+        if (currentAudio.value) {
+            currentAudio.value.pause();
+            currentAudio.value = null;
+        }
+
+        // 创建新的音频实例
+        const audio = new Audio(`${base_url}/tts/models/${id}/reference-audio`);
+
+        // 设置音频事件监听
+        audio.addEventListener('ended', () => {
+            currentPlayingId.value = null;
+            currentAudio.value = null;
+        });
+
+        audio.addEventListener('error', (error) => {
+            console.error('Audio playback error:', error);
+            currentPlayingId.value = null;
+            currentAudio.value = null;
+            Modal.error({
+                title: 'Error',
+                content: 'Failed to play reference audio',
+            });
+        });
+
+        // 开始播放
+        await audio.play();
+        currentPlayingId.value = id;
+        currentAudio.value = audio;
+        console.log('Audio played successfully');
+
+    } catch (error) {
+        console.error('Error playing audio:', error);
+        currentPlayingId.value = null;
+        currentAudio.value = null;
+        Modal.error({
+            title: 'Error',
+            content: 'Failed to play reference audio',
+        });
+    }
 };
 
+// 组件卸载时清理音频
+onUnmounted(() => {
+    if (currentAudio.value) {
+        currentAudio.value.pause();
+        currentAudio.value = null;
+    }
+    currentPlayingId.value = null;
+});
+
+// 计算属性：判断是否正在播放
+const isPlaying = (id: string) => {
+    return currentPlayingId.value === id;
+};
 
 </script>
 
@@ -280,14 +351,29 @@ const playRefAudio = (id: string) => {
                     <a-radio-group size="large" v-model:value="role">
                         <a-radio v-for="r in filteredRoles" :style="radioStyle" :value="r['id']" :key="r['id']">
                             <div style="display: flex; justify-content: space-between; align-items: center; width:450px;">
-                                {{ r['character_name'] }}
-                                <a-button :key="r['id']" type="text" @click="playRefAudio(r['id'])">
-                                    <SoundTwoTone style="font-size: 22px;"/>
-                                </a-button>
-                            </div>
+                            {{ r['character_name'] }}
+                            <a-button
+                                :key="r['id']"
+                                type="text"
+                                @click="playRefAudio(r['id'], $event)"
+                                class="audio-play-btn"
+                                :class="{ 'playing': isPlaying(r['id']) }"
+                            >
+                                <SoundTwoTone
+                                    v-if="isPlaying(r['id'])"
+                                    style="font-size: 18px; color: #52c41a;"
+                                    class="playing-icon"
+                                />
+                                <SoundOutlined
+                                    v-else
+                                    style="font-size: 18px; color: #1890ff;"
+                                />
+                            </a-button>
+                        </div>
 
                         </a-radio>
                     </a-radio-group>
+
                 </div>
             </div>
         </a-modal>
@@ -309,6 +395,42 @@ const playRefAudio = (id: string) => {
     }
 }
 
+.audio-play-btn {
+    padding: 0px 8px;
+    padding-top:2px;
+    border-radius: 4px;
+    transition: all 0.2s;
+    height: 40px;
+
+    &:hover {
+        background-color: #f0f0f0;
+    }
+
+    &.playing {
+        background-color: #f6ffed;
+        border-color: #1890ff;
+
+        .playing-icon {
+            animation: pulse 1.5s infinite;
+        }
+    }
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.7;
+        transform: scale(1.1);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
 .btn-groups {
     margin-top: 36px;
     display: flex;