当前位置：首页 > VUE

vue语音提示实现

2026-02-18 11:19:57VUE

Vue 语音提示实现方法

使用 Web Speech API

Web Speech API 是浏览器原生支持的语音合成接口，无需额外依赖库。在 Vue 中可直接调用：

// 在组件方法中实现语音提示
speak(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = 'zh-CN'; // 设置语言为中文
  window.speechSynthesis.speak(utterance);
}

调用时传入需要朗读的文本即可触发语音提示。注意浏览器兼容性，Chrome 和 Edge 支持较好。

使用第三方库 vue-speech

vue-speech 是专门为 Vue 封装的语音合成库，提供更便捷的 API：

安装依赖：

npm install vue-speech

在组件中使用：

import VueSpeech from 'vue-speech';

export default {
  components: { VueSpeech },
  methods: {
    playSpeech() {
      this.$speech({
        text: '这是语音提示内容',
        lang: 'zh-CN'
      });
    }
  }
}

实现语音识别输入

结合语音识别可实现双向交互，使用 Web Speech API 的语音识别部分：

startListening() {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = 'zh-CN';
  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    this.inputText = transcript;
  };
  recognition.start();
}

注意事项

在 mounted 钩子中检查浏览器支持情况：

mounted() {
  if (!('speechSynthesis' in window)) {
    console.warn('当前浏览器不支持语音合成API');
  }
}

移动端需用户交互事件触发后才能播放语音，不能自动播放

语音合成队列管理：

vue语音提示实现

// 停止当前语音
window.speechSynthesis.cancel();

完整组件示例

<template>
  <div>
    <button @click="speak('语音提示内容')">播放语音</button>
    <button @click="stopSpeech">停止</button>
  </div>
</template>

<script>
export default {
  methods: {
    speak(text) {
      const msg = new SpeechSynthesisUtterance(text);
      msg.lang = 'zh-CN';
      window.speechSynthesis.speak(msg);
    },
    stopSpeech() {
      window.speechSynthesis.cancel();
    }
  }
}
</script>

以上方法可根据项目需求选择实现，Web Speech API 适合简单需求，第三方库可以提供更丰富的功能。