完美版

src/views/chat/audio/useAudio.ts

@@ -15,7 +15,6 @@ export default function useAudio(url, playEnd = () => {}) {
     let audioDom: any = document.createElement('audio')
     audioDom.setAttribute('src', url)
     audioDom.setAttribute('crossorigin', 'anonymous')
-    // audioDom.
     document.body.appendChild(audioDom)
     // 创建分析器节点
     state.analyser = audioContext.createAnalyser()
@@ -51,67 +50,6 @@ export default function useAudio(url, playEnd = () => {}) {
     audioDom.onended = () => {
       stop()
     }
-    // const init = async () => {
-    //   try {
-    //     const audioContext = new window.AudioContext()
-    //     console.log(audioContext)
-    //     // 获取音频文件
-    //     const response = await fetch(url)
-    //     const arrayBuffer = await response.arrayBuffer()
-    //     const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
-    //     // 创建音频源
-    //     state.source = audioContext.createBufferSource()
-    //     state.source.buffer = audioBuffer
-    //     state.source.onended = () => {
-    //       console.log(444)
-    //       cancelAnimationFrame(state.animationId)
-    //       playEnd()
-    //     }
-    //     // 创建分析器节点
-    //     state.analyser = audioContext.createAnalyser()
-    //     state.analyser.fftSize = 256
-    //     state.dataArray = new Uint8Array(state.analyser.frequencyBinCount)
-    //     // 连接节点：源 -> 分析器 -> 目的地(扬声器)
-    //     state.source.connect(state.analyser)
-    //     state.analyser.connect(audioContext.destination)
-    //     // 开始播放
-    //     console.log(state.source)
-    //     // 开始音量检测循环
-    //     updateVolume()
-    //     resolve({
-    //       volume,
-    //       play: () => {
-    //         // 如果是从暂停恢复播放
-    //         if (state.pauseTime > 0) {
-    //           console.log(state.pauseTime)
-    //           state.source = audioContext.createBufferSource()
-    //           state.source.buffer = audioBuffer
-    //           state.source.connect(state.analyser)
-    //           console.log(Math.min(0, state.pauseTime - 1))
-    //           state.source.start(0, state.pauseTime - 1)
-    //           updateVolume()
-    //         } else {
-    //           state.source.start(0)
-    //         }
-    //       },
-    //       stop: () => {
-    //         state.source.stop()
-    //         state.source.disconnect()
-    //       },
-    //       pause: () => {
-    //         state.pauseTime = audioContext.currentTime
-    //         // 停止当前播放
-    //         state.source.stop()
-    //         state.source.disconnect()
-    //       },
-    //     })
-    //   } catch (err: any) {
-    //     ElMessage.error('无法播放音频: ' + err.message)
-    //     console.error('音频播放异常:', err)
-    //     reject(err)
-    //   }
-    // }
-    // init()
     const updateVolume = () => {
       if (!state.analyser) return
       state.analyser.getByteFrequencyData(state.dataArray)

src/views/chat/online.vue

@@ -8,6 +8,8 @@
     @mouseup.left="onSpeakStop"
     @keydown.space="onSpaceSpeakStart"
     @keyup.space="onSpaceSpeakStop"
+    @keyup.enter="onCall"
+    @keyup.esc="$emit('hangUp')"
   >
     <div
       class="absolute top-1/10 flex flex-col items-center gap-3 text-2xl font-bold text-[#303133]"
@@ -24,6 +26,7 @@
           <template v-if="state.isAsk">正在聆听 {{ durationCpt }}</template>
           <template v-else-if="state.isThink">正在思考……</template>
           <template v-else-if="state.isAnswer">正在回答</template>
+          <template v-else>等待提问中……</template>
         </div>
         <div class="mt-3 flex items-center text-sm text-[#909399]">
           <SvgIcon
@@ -103,15 +106,15 @@ const onEnd = (audio) => {
   state.isAsk = false
   if (state.duration < 2) {
     ElMessage.warning('提问时长过短，请持续提问！')
-    state.return
+    return
   }
   console.log(audio)
   state.isThink = true
   setTimeout(() => {
     state.isThink = false
     useAudio(
-      'https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/sami_podcast/tts/134d9d71475043199ef7372567fa9689.mp3',
-      // 'https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/32afe00820aa466192ce0f7b6495e946.mp3',
+      // 'https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/sami_podcast/tts/134d9d71475043199ef7372567fa9689.mp3',
+      'https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/32afe00820aa466192ce0f7b6495e946.mp3',
       () => {
         state.isAnswer = false
       },
@@ -142,10 +145,12 @@ const volumeCpt = computed(() => {
   return 0
 })
 const onCall = () => {
-  state.isWaiting = false
-  state.isAsk = false
-  state.isThink = false
-  state.isAnswer = false
+  if (state.isWaiting) {
+    state.isWaiting = false
+    state.isAsk = false
+    state.isThink = false
+    state.isAnswer = false
+  }
 }
 const onSpeakStart = () => {
   if (!state.isWaiting && !state.isAsk && !state.clickSpace) {
@@ -175,6 +180,7 @@ const onSpaceSpeakStop = () => {
 }
 const onStopAnswer = () => {
   state.isAnswer = false
+  state.answerAudioControl?.stop()
 }
 </script>