当前位置：首页 > VUE

vue怎么实现语音朗读

2026-01-23 11:04:19VUE

实现语音朗读的方法

在Vue中实现语音朗读功能，可以通过Web Speech API中的SpeechSynthesis接口来完成。以下是一个完整的实现方案：

安装必要的依赖

如果需要更复杂的语音控制功能，可以安装vue-speech插件：

npm install vue-speech

基本实现代码

创建一个Vue组件，封装语音朗读功能：

<template>
  <div>
    <button @click="speak">朗读文本</button>
    <button @click="stop">停止</button>
    <textarea v-model="textToSpeak"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textToSpeak: '请输入要朗读的文本',
      speechSynthesis: window.speechSynthesis,
      speechUtterance: null
    }
  },
  methods: {
    speak() {
      this.stop() // 先停止当前朗读
      this.speechUtterance = new SpeechSynthesisUtterance(this.textToSpeak)

      // 设置语音参数
      this.speechUtterance.rate = 1 // 语速 (0.1-10)
      this.speechUtterance.pitch = 1 // 音高 (0-2)
      this.speechUtterance.volume = 1 // 音量 (0-1)

      // 支持的语言取决于浏览器
      this.speechUtterance.lang = 'zh-CN' // 中文

      this.speechSynthesis.speak(this.speechUtterance)
    },
    stop() {
      this.speechSynthesis.cancel()
    }
  },
  mounted() {
    // 检查浏览器是否支持
    if (!('speechSynthesis' in window)) {
      alert('您的浏览器不支持语音合成API')
    }
  }
}
</script>

语音选择与自定义

可以添加语音选择功能，让用户选择不同的发音人：

methods: {
  getVoices() {
    return new Promise(resolve => {
      let voices = speechSynthesis.getVoices()
      if (voices.length) {
        resolve(voices)
        return
      }

      speechSynthesis.onvoiceschanged = () => {
        voices = speechSynthesis.getVoices()
        resolve(voices)
      }
    })
  },
  async speakWithVoice() {
    const voices = await this.getVoices()
    const chineseVoices = voices.filter(v => v.lang.includes('zh') || v.lang.includes('CN'))

    if (chineseVoices.length) {
      this.speechUtterance.voice = chineseVoices[0]
    }
    this.speechSynthesis.speak(this.speechUtterance)
  }
}

语音朗读状态监听

可以添加事件监听器来跟踪朗读状态：

this.speechUtterance.onend = () => {
  console.log('朗读结束')
}

this.speechUtterance.onerror = (event) => {
  console.error('朗读出错:', event)
}

this.speechUtterance.onboundary = (event) => {
  console.log('到达边界:', event.charIndex)
}