fix: 声音多个重叠播放

src/views/dialogue-detail/components/digital/digital-audio-card.vue

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import CustomIcon from '@/components/custom-icon/custom-icon.vue'
 import { DigitalHumanDialogueTimbreItem } from '../../dialogue-type'
 import { useDigitalHumanDialogueStore } from '@/store/modules/digital-human-dialogue'
@@ -12,6 +12,7 @@ interface Props {
 interface Emits {
   (e: 'click', value: string): void
   (e: 'toggle', value: boolean): void
+  (e: 'play', value: string): void
 }
 
 defineProps<Props>()
@@ -19,13 +20,8 @@ defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const digitalHumanDialogueStore = useDigitalHumanDialogueStore()
-const digitalAudio = ref<HTMLAudioElement>()
 
 const timebreId = computed(() => digitalHumanDialogueStore.humanInfo.timebreId)
-
-function playAudio() {
-  digitalAudio.value?.play()
-}
 </script>
 
 <template>
@@ -40,7 +36,11 @@ function playAudio() {
     <div class="flex-1 overflow-hidden">
       <div class="mb-2 flex items-center gap-2">
         <div class="max-w-32 truncate">{{ dialogueTimbreItem?.name }}</div>
-        <CustomIcon class="cursor-pointer text-lg" icon="mingcute:volume-line" @click.stop.prevent="playAudio" />
+        <CustomIcon
+          class="cursor-pointer text-lg"
+          icon="mingcute:volume-line"
+          @click.stop.prevent="emit('play', dialogueTimbreItem!.audioUrl)"
+        />
       </div>
       <NScrollbar x-scrollable>
         <div class="flex gap-2">
@@ -52,5 +52,4 @@ function playAudio() {
       <CustomIcon class="cursor-pointer text-lg" icon="ant-design:swap-outlined" @click="emit('toggle', true)" />
     </div>
   </div>
-  <audio ref="digitalAudio" :src="dialogueTimbreItem?.audioUrl"></audio>
 </template>

src/views/dialogue-detail/components/digital/digital-audio.vue

@@ -27,6 +27,8 @@ const digitalTimbreMaleList = ref<DigitalHumanDialogueTimbreItem[]>([])
 const showAll = ref(false)
 const searchName = ref('')
 
+const digitalAudioRef = ref<HTMLAudioElement>()
+
 const speed = computed({
   get() {
     return digitalHumanDialogueStore.humanInfo.speed
@@ -74,6 +76,7 @@ async function getDigitalTimbreList() {
 
 function handleUpdateAudioType(audioType: string) {
   digitalHumanDialogueStore.humanInfo.timebreId = audioType === 'mandarin' ? '5132' : ''
+  digitalAudioRef.value?.pause()
 }
 
 async function handleSearch(value: string) {
@@ -88,6 +91,12 @@ async function handleSearch(value: string) {
 function handleClickAudioCard(timbreId: string) {
   digitalHumanDialogueStore.setTimbreId(timbreId)
 }
+
+function handlePlayDigitalAudio(audioUrl: string) {
+  digitalAudioRef.value?.pause()
+  digitalAudioRef.value!.src = audioUrl
+  digitalAudioRef.value?.play()
+}
 </script>
 
 <template>
@@ -104,7 +113,12 @@ function handleClickAudioCard(timbreId: string) {
     </div>
 
     <div v-show="isMandarinAudioType">
-      <DigitalAudioCard :dialogue-timbre-item="digitalTimbreValue" :show-toggle="true" @toggle="showAll = true" />
+      <DigitalAudioCard
+        :dialogue-timbre-item="digitalTimbreValue"
+        :show-toggle="true"
+        @toggle="showAll = true"
+        @play="handlePlayDigitalAudio"
+      />
     </div>
 
     <div class="mt-4 text-lg">聲音</div>
@@ -145,7 +159,10 @@ function handleClickAudioCard(timbreId: string) {
         :key="index"
         :dialogue-timbre-item="timbre"
         @click="handleClickAudioCard"
+        @play="handlePlayDigitalAudio"
       />
     </NScrollbar>
   </div>
+
+  <audio ref="digitalAudioRef" />
 </template>