vue 简单的播报语音功能

<template>
  <div>
    <button @click="checkSpeechSupport">检查语音支持</button>
    <button @click="playSpeech">播放语音</button>
    <button @click="playVoice">播放语音</button>
  </div>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
  data() {
    return {};
  },
  methods: {
    checkSpeechSupport() {
      if ('speechSynthesis' in window) {
        console.log('语音合成可用');
      } else {
        console.log('该浏览器不支持语音合成');
      }
    },
    playSpeech() {
      const message = new SpeechSynthesisUtterance('你要播放的文字');
      window.speechSynthesis.speak(message);
    },
    playVoice() {
      this.handleSpeak('播放语音测试，abcdefghijklmnopq') // 传入需要播放的文字
    },
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text;     // 文字内容: 小朋友，你是否有很多问号
      msg.lang = "zh-CN";  // 使用的语言:中文
      msg.volume = 1;      // 声音音量：1
      msg.rate = 1;        // 语速：1
      msg.pitch = 1;       // 音高：1
      synth.speak(msg);    // 播放
    },
    // 语音停止
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      synth.cancel(msg);
    }
  }
};
</script>