当前位置：首页 > VUE

vue实现语音播报

2026-03-28 07:14:28VUE

使用 Web Speech API 实现语音播报

Vue 可以通过 Web Speech API 实现语音播报功能。Web Speech API 提供了 SpeechSynthesis 接口，允许浏览器将文本转换为语音。

安装依赖（可选）

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

npm install vue-speech

基本实现方式

在 Vue 组件中直接调用浏览器 API：

export default {
  methods: {
    speak(text) {
      const utterance = new SpeechSynthesisUtterance(text);
      speechSynthesis.speak(utterance);
    }
  }
}

完整组件示例

<template>
  <div>
    <input v-model="text" placeholder="输入要播报的文字"/>
    <button @click="speak">播放</button>
    <button @click="stop">停止</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '欢迎使用语音播报功能'
    }
  },
  methods: {
    speak() {
      if (this.text.trim() === '') return;

      const utterance = new SpeechSynthesisUtterance(this.text);
      utterance.rate = 1;  // 语速 (0.1-10)
      utterance.pitch = 1; // 音高 (0-2)

      // 可选：设置语音
      const voices = window.speechSynthesis.getVoices();
      utterance.voice = voices.find(voice => voice.lang === 'zh-CN') || voices[0];

      window.speechSynthesis.speak(utterance);
    },
    stop() {
      window.speechSynthesis.cancel();
    }
  },
  mounted() {
    // 某些浏览器需要先加载语音列表
    window.speechSynthesis.onvoiceschanged = () => {
      this.voices = window.speechSynthesis.getVoices();
    };
  }
}
</script>

使用第三方库（vue-speech）

import Vue from 'vue'
import VueSpeech from 'vue-speech'

Vue.use(VueSpeech)

// 在组件中使用
this.$speechTalk('你好，这是语音播报', {
  rate: 1,
  pitch: 1,
  lang: 'zh-CN'
})

注意事项

浏览器兼容性：Web Speech API 在 Chrome、Edge、Safari 中支持较好，但在某些移动浏览器中可能不支持
用户授权：某些浏览器可能需要用户交互（如点击事件）后才能播放语音
语音列表加载：获取可用语音列表可能需要等待 voiceschanged 事件
中文支持：确保浏览器安装了中文语音包

错误处理

speak() {
  try {
    if (!('speechSynthesis' in window)) {
      throw new Error('您的浏览器不支持语音合成功能');
    }

    const utterance = new SpeechSynthesisUtterance(this.text);
    utterance.onerror = (event) => {
      console.error('语音播报出错:', event.error);
    };

    window.speechSynthesis.speak(utterance);
  } catch (error) {
    console.error(error.message);
    alert(error.message);
  }
}