当前位置：首页 > VUE

vue实现语音唤醒

2026-01-16 19:37:43VUE

实现语音唤醒的基本原理

语音唤醒通常通过监听麦克风输入，检测特定关键词或短语触发操作。Vue中可结合Web Speech API或第三方库实现。

使用Web Speech API实现

Web Speech API的SpeechRecognition接口可用于语音识别。需注意浏览器兼容性（Chrome、Edge支持较好）。

// 在Vue组件中
export default {
  data() {
    return {
      recognition: null,
      isListening: false,
      wakeWord: '你好小助手' // 唤醒词
    }
  },
  mounted() {
    this.initSpeechRecognition()
  },
  methods: {
    initSpeechRecognition() {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
      if (!SpeechRecognition) {
        console.error('浏览器不支持语音识别')
        return
      }

      this.recognition = new SpeechRecognition()
      this.recognition.continuous = true
      this.recognition.interimResults = true
      this.recognition.lang = 'zh-CN'

      this.recognition.onresult = (event) => {
        const transcript = Array.from(event.results)
          .map(result => result[0])
          .map(result => result.transcript)
          .join('')

        if (transcript.includes(this.wakeWord)) {
          console.log('唤醒词检测成功')
          // 触发唤醒后的操作
          this.onWakeUp()
        }
      }

      this.recognition.onerror = (event) => {
        console.error('语音识别错误:', event.error)
      }
    },
    startListening() {
      if (this.recognition) {
        this.recognition.start()
        this.isListening = true
      }
    },
    stopListening() {
      if (this.recognition) {
        this.recognition.stop()
        this.isListening = false
      }
    },
    onWakeUp() {
      // 唤醒后的处理逻辑
      console.log('系统已唤醒')
    }
  }
}

使用第三方库实现

对于更复杂的需求，可考虑以下库：

annyang：轻量级语音识别库
```
import annyang from 'annyang'
```

export default { mounted() { if (annyang) { const commands = { '你好小助手': () => this.onWakeUp() } annyang.addCommands(commands) annyang.start({ autoRestart: true, continuous: false }) } } }


2. vue-voice-command：Vue专用语音指令插件
需先安装：
```bash
npm install vue-voice-command

使用示例：

import VueVoiceCommand from 'vue-voice-command'

Vue.use(VueVoiceCommand, {
  lang: 'zh-CN',
  commands: {
    '你好小助手': {
      callback: () => console.log('唤醒成功')
    }
  }
})

优化唤醒体验的技巧

设置灵敏度阈值，避免误触发

// 在onresult回调中添加逻辑
let confidence = event.results[0][0].confidence
if (transcript.includes(this.wakeWord) && confidence > 0.7) {
  this.onWakeUp()
}

添加视觉反馈

vue实现语音唤醒

<template>
  <div>
    <div v-if="isListening" class="mic-indicator">监听中...</div>
    <button @click="toggleListening">
      {{ isListening ? '停止' : '开始' }}语音唤醒
    </button>
  </div>
</template>