当前位置：首页 > VUE

vue实现语音自动播报

2026-02-21 17:00:10VUE

Vue 实现语音自动播报

使用 Web Speech API

Web Speech API 提供了语音合成功能，可以直接在浏览器中实现文本转语音（TTS）。Vue 中可以封装一个简单的语音播报组件。

<template>
  <div>
    <button @click="speak">播放语音</button>
  </div>
</template>

<script>
export default {
  methods: {
    speak() {
      const utterance = new SpeechSynthesisUtterance('你好，这是语音播报测试');
      utterance.lang = 'zh-CN'; // 设置语言为中文
      window.speechSynthesis.speak(utterance);
    }
  }
};
</script>

封装为全局方法

可以将语音播报功能封装为 Vue 的全局方法，方便在任何组件中调用。

// main.js
import Vue from 'vue';

Vue.prototype.$speak = (text, lang = 'zh-CN') => {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = lang;
  window.speechSynthesis.speak(utterance);
};

// 在组件中使用
this.$speak('欢迎使用语音播报功能');

添加语音队列

为了避免语音重叠播放，可以实现一个简单的语音队列。

let speechQueue = [];
let isSpeaking = false;

function processQueue() {
  if (speechQueue.length === 0 || isSpeaking) return;
  isSpeaking = true;
  const { text, lang } = speechQueue.shift();
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = lang;
  utterance.onend = () => {
    isSpeaking = false;
    processQueue();
  };
  window.speechSynthesis.speak(utterance);
}

Vue.prototype.$speak = (text, lang = 'zh-CN') => {
  speechQueue.push({ text, lang });
  processQueue();
};

控制语音速度和音调

可以通过设置 SpeechSynthesisUtterance 的属性调整语音的速度和音调。

const utterance = new SpeechSynthesisUtterance('调整语音参数');
utterance.rate = 1.0; // 速度，默认1.0
utterance.pitch = 1.0; // 音调，默认1.0
utterance.volume = 1.0; // 音量，默认1.0
window.speechSynthesis.speak(utterance);

兼容性处理

Web Speech API 在某些浏览器中可能不支持，可以通过以下方式检测兼容性并给出提示。

if (!window.speechSynthesis) {
  console.error('当前浏览器不支持语音合成功能');
} else {
  this.$speak('浏览器支持语音合成');
}

使用第三方库

如果需要更复杂的语音功能，可以使用第三方库如 responsive-voice 或 annyang。

安装 responsive-voice：

npm install responsive-voice

在 Vue 中使用：

vue实现语音自动播报

import responsiveVoice from 'responsive-voice';

export default {
  methods: {
    speak() {
      responsiveVoice.speak('这是通过第三方库实现的语音播报', 'Chinese Female');
    }
  }
};