当前位置：首页 > VUE

vue实现语音

2026-01-12 10:47:37VUE

Vue 实现语音功能

在 Vue 中实现语音功能通常涉及语音识别（Speech-to-Text）和语音合成（Text-to-Speech）。以下是具体实现方法：

语音识别（Speech-to-Text）

使用 Web Speech API 的 SpeechRecognition 接口实现语音输入：

// 在 Vue 组件中
export default {
  data() {
    return {
      recognition: null,
      transcript: '',
      isListening: false
    }
  },
  mounted() {
    this.initRecognition()
  },
  methods: {
    initRecognition() {
      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) => {
        let interimTranscript = ''
        let finalTranscript = ''

        for (let i = event.resultIndex; i < event.results.length; i++) {
          const transcript = event.results[i][0].transcript
          if (event.results[i].isFinal) {
            finalTranscript += transcript
          } else {
            interimTranscript += transcript
          }
        }

        this.transcript = finalTranscript || interimTranscript
      }

      this.recognition.onerror = (event) => {
        console.error('语音识别错误:', event.error)
      }
    },
    toggleListening() {
      if (this.isListening) {
        this.recognition.stop()
      } else {
        this.recognition.start()
      }
      this.isListening = !this.isListening
    }
  }
}

语音合成（Text-to-Speech）

使用 Web Speech API 的 SpeechSynthesis 接口实现语音输出：

vue实现语音

// 在 Vue 组件中
export default {
  methods: {
    speak(text) {
      if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance(text)
        utterance.lang = 'zh-CN' // 设置语言
        utterance.rate = 1 // 语速
        utterance.pitch = 1 // 音高
        window.speechSynthesis.speak(utterance)
      } else {
        console.error('浏览器不支持语音合成')
      }
    }
  }
}