浏览器文字转语音播报

*注意事项：
重新加载或刷新会导致不能自动语音播报，原因：
chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。
严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。
在页面加载完毕的情况下，用户需要click、dbclick、touch等主动交互行为，才能正常播放。
或者在浏览器安全设置中将需要播放语音的网址加进去

方法一、原生speechSynthesis

// 前端语音播报

export function playAudio (text) {
// 取消之前的播报，如不加则存队列依次完成播报
  window.speechSynthesis.cancel()
  // 创建一个新的语音合成对象
  let synth = window.speechSynthesis
  if (!synth) {
    alert('浏览器不支持语音播报！')
  }
  // 创建一个新的语音合成消息
  let utterance = new SpeechSynthesisUtterance()
  // 设置要转换为语音的文本内容
  utterance.text = text
  // 设置语音合成的语言
  utterance.lang = 'zh-cn'
  // 设置语速和音调
  utterance.rate = 1.0 // 数越大，语速就越快
  utterance.pitch = 1.0 // 数越大，声音就越尖锐
  // 将语音合成消息添加到队列中
  synth.speak(utterance)
  // 停止
  // speechSynthesis.cancel(utterance)
}

// 直接调用playAudio(‘传入播放文字’)

方法二、Vue实现语音播报

安装speak-tts包

npm install speak-tts

在页面中引入

import Speech from 'speak-tts'

	// 初始化
	 speechInit(){
        this.speech = new Speech()
        this.speech.setLanguage('zh-CN')
        this.speech.init().then(()=>{
          console.log('语音播报初始化完成...')
        })
      },
      //语音播报
      speak(text){
        this.speech.speak({text: text}).then(()=>{
          console.log("播报完成...")
        })
      },
     // 使用时候调用speak(传入播放文字)