当前位置：首页 > VUE

vue怎么实现语音朗读

2026-02-24 01:40:47VUE

实现语音朗读的基本方法

在Vue中实现语音朗读可以通过Web Speech API中的SpeechSynthesis接口完成。该接口允许将文本转换为语音，无需额外依赖库。

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

调用时传入需要朗读的文本即可：

this.speak('Hello, this is a test message.');

控制语音参数

通过设置SpeechSynthesisUtterance对象的属性，可以调整语音的参数：

vue怎么实现语音朗读

const utterance = new SpeechSynthesisUtterance(text);
utterance.rate = 1.0;  // 语速 (0.1-10)
utterance.pitch = 1.0; // 音高 (0-2)
utterance.volume = 1.0; // 音量 (0-1)
utterance.lang = 'en-US'; // 语言代码

获取可用语音列表

通过speechSynthesis.getVoices()获取浏览器支持的语音列表，可用于切换不同发音人：

mounted() {
  this.voices = speechSynthesis.getVoices();
  // 某些浏览器需要监听voiceschanged事件
  speechSynthesis.onvoiceschanged = () => {
    this.voices = speechSynthesis.getVoices();
  };
}

语音状态控制

speechSynthesis提供以下控制方法：

vue怎么实现语音朗读

speechSynthesis.pause();   // 暂停
speechSynthesis.resume();  // 恢复
speechSynthesis.cancel();  // 取消

完整组件示例

<template>
  <div>
    <textarea v-model="text"></textarea>
    <button @click="speak">朗读</button>
    <button @click="pause">暂停</button>
    <button @click="resume">继续</button>
    <button @click="stop">停止</button>
    <select v-model="selectedVoice">
      <option v-for="voice in voices" :value="voice">{{ voice.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      voices: [],
      selectedVoice: null
    };
  },
  mounted() {
    this.loadVoices();
  },
  methods: {
    loadVoices() {
      this.voices = speechSynthesis.getVoices();
      speechSynthesis.onvoiceschanged = this.loadVoices;
    },
    speak() {
      const utterance = new SpeechSynthesisUtterance(this.text);
      if (this.selectedVoice) {
        utterance.voice = this.selectedVoice;
      }
      speechSynthesis.speak(utterance);
    },
    pause() {
      speechSynthesis.pause();
    },
    resume() {
      speechSynthesis.resume();
    },
    stop() {
      speechSynthesis.cancel();
    }
  }
};
</script>