vue-文字转语音

vue

SpeechSynthesisUtterance监听事件

onstart 开始合成

onend 合成结束

onerror 合成错误

onpause 暂停

onresume 恢复暂停

onboundary 在句子或单词边界

<template>
  <div class="language">
    <!--    <div class="right-lanage">-->
    <img src="../../assets/img/zanting.png" alt="" style="float: right; padding-right: 20px; padding-top: 7px"
         v-if="show" @click="playVoice">
    <img src="../../assets/img/bofang.png" alt="" style="float: right; padding-right: 20px; padding-top: 7px"
         v-else
         @click="playVoice">
    <p>{{text}}</p>
  </div>
  <!--  </div>-->
</template>

const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();

  data() {
    return {
      show: false, //显示与隐藏
      text:'据盖茨基金会官方微博6月15日消息，比尔及梅琳达'
    }
  },

  methods: {
    playVoice() {
      this.show = !this.show;
      this.handleSpeak(this.text)
      if (this.show===false) {
        this.handleStop()
      }
    },
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text;     // 文字内容: 小朋友，你是否有很多问号
      msg.lang = "zh-TW";  // 使用的语言:中文
      msg.volume = 1;      // 声音音量：1
      msg.rate = 1;        // 语速：1
      msg.pitch = 1;       // 音高：1
      synth.speak(msg);    // 播放
      msg.onend = (event) => {  //语音合成结束时候的回调（语音读完后触发）
        alert('合成结束');
      }
    },
    // 语音停止
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      synth.cancel(msg);
    }
  },

const speak = (word) => {
  let msg = new window.SpeechSynthesisUtterance(word);
  // msg.text = word; //播放文案
  msg.volume = '1'; // 声音的音量，区间范围是0到1，默认是1。
  msg.rate = 1;// 设置播放语速，范围：0.1 - 10之间    正常为1倍播放
  msg.pitch = '0'; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。
  msg.lang = 'zh-cn'; // 使用的语言，字符串， 例如："zh-cn"
  msg.voiceURI = 'Ting-Ting'
  msg.voiceURI = 'Google 普通话（中国大陆）';

  msg.onend = (event) => {  //语音合成结束时候的回调（语音读完后触发）
    console.log('合成结束');
  }
  msg.onstart = (event) => {
    console.log('合成开始');
  }
  msg.onerror = (event) => {
    console.log('onerror');
  }
  msg.onpause = (event) => {
    console.log('暂停');
  }
  msg.onresume = (event) => {
    console.log('恢复');
  }
  msg.onboundary = (event) => {
    console.log('在单词或句子边界');
  }
  window.speechSynthesis.speak(msg);
  return window.speechSynthesis;
}
let instance = null;
ele.addEventListener('click', () => {
  instance = speak('123456789')
  console.log(instance.getVoices());
})
pause.addEventListener('click', () => {
  instance.pause()
})
resume.addEventListener('click', () => {
  instance.resume()
})
cancel.addEventListener('click', () => {
  instance.cancel()
})