当前位置：首页 > VUE

vue实现语音识别

2026-02-19 07:55:56VUE

实现语音识别的核心方法

使用Web Speech API中的SpeechRecognition接口，这是浏览器原生支持的语音识别功能。需要在Vue项目中引入并封装相关逻辑。

创建一个语音识别服务模块：

// speechRecognition.js
export const initSpeechRecognition = (lang = 'zh-CN') => {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
  if (!SpeechRecognition) throw new Error('浏览器不支持语音识别')

  const recognition = new SpeechRecognition()
  recognition.lang = lang
  recognition.interimResults = true

  return recognition
}

在Vue组件中的使用示例

创建可复用的语音识别组件：

<template>
  <div>
    <button @click="toggleRecognition">
      {{ isListening ? '停止录音' : '开始录音' }}
    </button>
    <p>{{ transcript }}</p>
  </div>
</template>

<script>
import { initSpeechRecognition } from './speechRecognition'

export default {
  data() {
    return {
      isListening: false,
      transcript: '',
      recognition: null
    }
  },
  methods: {
    toggleRecognition() {
      if (this.isListening) {
        this.stopRecognition()
      } else {
        this.startRecognition()
      }
    },
    startRecognition() {
      this.recognition = initSpeechRecognition()
      this.recognition.onresult = (event) => {
        const transcript = Array.from(event.results)
          .map(result => result[0])
          .map(result => result.transcript)
          .join('')
        this.transcript = transcript
      }
      this.recognition.start()
      this.isListening = true
    },
    stopRecognition() {
      this.recognition.stop()
      this.isListening = false
    }
  },
  beforeDestroy() {
    if (this.recognition) {
      this.recognition.stop()
    }
  }
}
</script>

处理兼容性和错误情况

添加错误处理和兼容性检查：

startRecognition() {
  try {
    this.recognition = initSpeechRecognition()
    this.recognition.onerror = (event) => {
      console.error('语音识别错误:', event.error)
      this.isListening = false
    }
    this.recognition.onend = () => {
      if (this.isListening) {
        this.recognition.start()
      }
    }
    // ...其他事件处理
    this.recognition.start()
    this.isListening = true
  } catch (error) {
    alert(error.message)
  }
}

添加语音反馈功能

扩展功能实现语音反馈：

methods: {
  speak(text) {
    const utterance = new SpeechSynthesisUtterance(text)
    utterance.lang = 'zh-CN'
    window.speechSynthesis.speak(utterance)
  },
  handleRecognitionResult(transcript) {
    this.transcript = transcript
    if (transcript.includes('你好')) {
      this.speak('您好，有什么可以帮您？')
    }
  }
}

第三方库集成方案

对于更复杂的需求，可以考虑第三方库如：

npm install annyang vue-voice-recognition

使用示例：

import annyang from 'annyang'

export default {
  mounted() {
    if (annyang) {
      annyang.addCommands({
        '你好': () => {
          this.$emit('speech', '您好')
        },
        '搜索 *term': (term) => {
          this.$emit('search', term)
        }
      })
    }
  },
  methods: {
    startListening() {
      annyang.start({ autoRestart: true, continuous: true })
    }
  }
}

vue实现语音识别