当前位置：首页 > VUE

vue实现语音播报

2026-01-14 04:28:27VUE

使用 Web Speech API 实现语音播报

Vue 中可以通过 Web Speech API 的 SpeechSynthesis 接口实现语音播报功能。该 API 是现代浏览器原生支持的语音合成技术。

// 在 Vue 组件中
methods: {
  speak(text) {
    const utterance = new SpeechSynthesisUtterance(text);
    window.speechSynthesis.speak(utterance);
  }
}

调用 speak 方法并传入需要播报的文本即可触发语音输出。可以设置语言、音调、语速等参数：

utterance.lang = 'zh-CN'; // 设置中文
utterance.pitch = 1;      // 音调 (0-2)
utterance.rate = 1;       // 语速 (0.1-10)

处理浏览器兼容性问题

不同浏览器对 Web Speech API 的支持程度不同，需要进行兼容性处理：

speak(text) {
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text);
    window.speechSynthesis.speak(utterance);
  } else {
    console.error('浏览器不支持语音合成功能');
    // 可以在这里添加降级方案，如显示文字提示
  }
}

封装为可复用的插件

将语音功能封装为 Vue 插件可以方便地在多个组件中复用：

// speechPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$speak = function(text, options = {}) {
      if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance(text);
        Object.assign(utterance, options);
        window.speechSynthesis.speak(utterance);
      }
    }
  }
}

// main.js
import speechPlugin from './speechPlugin';
Vue.use(speechPlugin);

// 组件中使用
this.$speak('欢迎使用语音功能', { rate: 0.8 });

添加语音控制功能

可以扩展功能实现暂停、继续和停止语音：

methods: {
  pauseSpeech() {
    window.speechSynthesis.pause();
  },
  resumeSpeech() {
    window.speechSynthesis.resume();
  },
  cancelSpeech() {
    window.speechSynthesis.cancel();
  }
}

使用第三方库增强功能

如果需要更复杂的功能，可以考虑使用第三方库如 vue-speech：

安装：

npm install vue-speech

使用示例：

import VueSpeech from 'vue-speech';

export default {
  components: { VueSpeech },
  data() {
    return {
      text: '需要播报的文本'
    }
  }
}

模板中使用：

<vue-speech :text="text" :options="{ lang: 'zh-CN' }"></vue-speech>

语音播报事件处理

可以监听语音合成事件实现更精细的控制：

const utterance = new SpeechSynthesisUtterance(text);
utterance.onstart = () => console.log('开始播报');
utterance.onend = () => console.log('播报结束');
utterance.onerror = (e) => console.error('播报错误', e);
window.speechSynthesis.speak(utterance);