当前位置：首页 > VUE

vue 实现语音播报

2026-01-18 23:47:03VUE

实现语音播报的基本方法

在Vue中实现语音播报可以通过Web Speech API完成，该API提供了语音合成（SpeechSynthesis）功能。以下是具体实现步骤：

创建语音播报组件

新建一个Vue组件（如VoiceSpeaker.vue），核心代码如下：

vue 实现语音播报

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

<script>
export default {
  methods: {
    speak() {
      const utterance = new SpeechSynthesisUtterance();
      utterance.text = '这是要播报的内容';
      utterance.lang = 'zh-CN'; // 设置中文语音
      utterance.rate = 1; // 语速 (0.1-10)
      utterance.pitch = 1; // 音高 (0-2)

      window.speechSynthesis.speak(utterance);
    }
  }
}
</script>

浏览器兼容性处理

不同浏览器对Web Speech API的支持程度不同，需要添加兼容性检查：

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

语音队列管理

避免连续播报时语音重叠，可以添加队列管理：

vue 实现语音播报

data() {
  return {
    speechQueue: []
  }
},
methods: {
  addToQueue(text) {
    this.speechQueue.push(text);
    if (this.speechQueue.length === 1) {
      this.processQueue();
    }
  },
  processQueue() {
    if (this.speechQueue.length === 0) return;

    const utterance = new SpeechSynthesisUtterance(this.speechQueue[0]);
    utterance.onend = () => {
      this.speechQueue.shift();
      this.processQueue();
    };
    speechSynthesis.speak(utterance);
  }
}

语音控制功能

添加暂停、继续和停止功能：

methods: {
  pauseSpeech() {
    window.speechSynthesis.pause();
  },
  resumeSpeech() {
    window.speechSynthesis.resume();
  },
  cancelSpeech() {
    window.speechSynthesis.cancel();
    this.speechQueue = [];
  }
}

多语言支持

通过检测浏览器支持的语音列表实现多语言选择：

data() {
  return {
    voices: [],
    selectedVoice: null
  }
},
mounted() {
  speechSynthesis.onvoiceschanged = () => {
    this.voices = speechSynthesis.getVoices();
    this.selectedVoice = this.voices.find(voice => 
      voice.lang.includes('zh') || voice.lang.includes('en')
    );
  };
}

注意事项

某些浏览器需要用户交互（如点击事件）后才能触发语音播报
移动端浏览器可能对连续语音播报有限制
语音质量取决于操作系统安装的语音引擎
在组件销毁时应该取消所有语音：

beforeDestroy() {
  window.speechSynthesis.cancel();
}

完整组件示例

<template>
  <div>
    <input v-model="textToSpeak" placeholder="输入播报内容">
    <button @click="speak">播放</button>
    <button @click="pauseSpeech">暂停</button>
    <button @click="resumeSpeech">继续</button>
    <button @click="cancelSpeech">停止</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textToSpeak: '',
      voices: [],
      selectedVoice: null
    }
  },
  mounted() {
    if ('speechSynthesis' in window) {
      speechSynthesis.onvoiceschanged = () => {
        this.voices = speechSynthesis.getVoices();
        this.selectedVoice = this.voices.find(voice => 
          voice.lang.includes('zh') || voice.lang.includes('en')
        );
      };
    }
  },
  methods: {
    speak() {
      if (!this.textToSpeak.trim()) return;

      const utterance = new SpeechSynthesisUtterance(this.textToSpeak);
      utterance.voice = this.selectedVoice;
      utterance.lang = 'zh-CN';
      window.speechSynthesis.speak(utterance);
    },
    pauseSpeech() {
      window.speechSynthesis.pause();
    },
    resumeSpeech() {
      window.speechSynthesis.resume();
    },
    cancelSpeech() {
      window.speechSynthesis.cancel();
    }
  },
  beforeDestroy() {
    window.speechSynthesis.cancel();
  }
}
</script>