feat: recognizeSpeech

src/components/Content.vue

@@ -10,7 +10,8 @@ const chatMessages = ref<ChatMessage[]>([])
 const message = ref('')
 const loading = ref(false)
 const text = ref('')
-const speechService = new SpeechService(VITE_SCRIPTION_KEY, VITE_REGION)
+const speechService = ref(new SpeechService(VITE_SCRIPTION_KEY, VITE_REGION))
+const isRecognizing = computed(() => speechService.value.isRecognizing)
 
 // hooks
 const { el, scrollToBottom } = useScroll()
@@ -30,24 +31,6 @@ const roleClass = (role: string) => {
       return 'bg-gray-500'
   }
 }
-
-const speak = (content: string) => {
-  text.value = content
-  speechService.textToSpeak(content)
-}
-
-const recognize = async () => {
-  loading.value = true
-  try {
-    const text = await speechService.recognizeSpeech()
-    console.log(text)
-    loading.value = false
-  }
-  catch (error) {
-    loading.value = false
-  }
-}
-
 const onSubmit = async () => {
   const key = getKey()
   if (!verifyKey(key)) return alert('请输入正确的API-KEY')
@@ -70,6 +53,23 @@ const onSubmit = async () => {
   })
   loading.value = false
 }
+
+function speak(content: string) {
+  text.value = content
+  speechService.value.textToSpeak(content)
+}
+
+const recognize = async () => {
+  console.log(isRecognizing.value)
+  if (isRecognizing.value) {
+    const result = await speechService.value.stopRecognizeSpeech()
+    message.value = result
+    onSubmit()
+  }
+  else {
+    speechService.value.startRecognizeSpeech()
+  }
+}
 </script>
 
 <template>
@@ -108,15 +108,19 @@ const onSubmit = async () => {
       >
         <i i-carbon:microphone />
       </Button>
+
+      <div v-if="isRecognizing" class="loading-btn">
+        isRecognizing
+      </div>
       <input
-        v-if="!loading"
+        v-else-if="!loading "
         v-model="message"
         type="text"
         placeholder="Type your message here..."
         input-box p-3 flex-1
       >
       <div v-else class="loading-btn">
-        loading...
+        AI Is Thinking...
       </div>
       <Button
         :disabled="loading"

src/utils/speaker.ts

@@ -10,6 +10,9 @@ export class SpeechService {
   private recognizer: SpeechRecognizer
   private synthesizer: SpeechSynthesizer
   private speechConfig: SpeechConfig
+  public isRecognizing = false
+  public isSpeaking = false
+
   constructor(subscriptionKey: string, region: string) {
     const speechConfig = SpeechConfig.fromSubscription(subscriptionKey, region)
     speechConfig.speechRecognitionLanguage = 'en-US'
@@ -23,6 +26,24 @@ export class SpeechService {
     this.synthesizer = new SpeechSynthesizer(this.speechConfig)
   }
 
+  // 语音识别
+  public startRecognizeSpeech() {
+    this.isRecognizing = true
+    this.recognizer.startContinuousRecognitionAsync()
+  }
+
+  // 停止语音识别
+  public stopRecognizeSpeech(): Promise<string> {
+    return new Promise((resolve, reject) => {
+      this.recognizer.recognized = (s, e) => {
+        this.recognizer.stopContinuousRecognitionAsync()
+        this.isRecognizing = false
+        resolve(e.result.text)
+      }
+    })
+  }
+
+  // 识别一次，无需取消
   public recognizeSpeech(): Promise<string> {
     return new Promise((resolve, reject) => {
       this.recognizer.recognizeOnceAsync((result) => {
@@ -34,11 +55,19 @@ export class SpeechService {
     })
   }
 
-  public textToSpeak(text: string, voice?: string) {
+  // 语音合成
+  public async textToSpeak(text: string, voice?: string) {
+    // this.isSpeaking = true
     this.speechConfig.speechSynthesisVoiceName = voice || this.speechConfig.speechSynthesisVoiceName
     this.synthesizer.speakTextAsync(text)
   }
 
+  // 停止语音合成
+  public stopTextToSpeak() {
+    this.synthesizer.close()
+  }
+
+  // 获取语音列表
   public async getVoices(): Promise<VoiceInfo[]> {
     const res = await this.synthesizer.getVoicesAsync()
     return res.voices