SpeechSynthesisUtterance文字转语音播报

一、介绍

SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等

二、基本属性

var speech = new SpeechSynthesisUtterance()

• speech.lang 获取并设置话语的语言（en-US、zh-CN）
• speech.pitch 获取并设置话语的音调 (值越大越尖锐，range:0-2, default:1, float)
• speech.rate 获取并设置说话的速度 (值越大语速越快, range:0.1-10, default:1, float)
• speech.text 获取并设置说话时的文本
• speech.voice 获取并设置说话的声音
• speech.volume 获取并设置说话的音量 (range: 0-1, default:1, float)
• speech.onboundary
• speech.onend 播放结束的回调
• speech.onerror 播放出现错误的回调
• speech.onmark 当读到标记文本时的回调
• speech.onpause 播放暂停
• speech.onresume 播放重启
• speech.onstart 播放开始的回调

三、兼容性

四、案例

function speak (msg) {
	var speech = new SpeechSynthesisUtterance()
	speech.text = msg
	speech.pitch = 1 // 获取并设置话语的音调(0-2 默认1，值越大越尖锐,越低越低沉)
	speech.rate = 0.9 // 获取并设置说话的速度(0.1-10 默认1，值越大语速越快,越小语速越慢)
	speech.volume = 100 // 获取并设置说话的音量
	speech.lang = 'zh-CN' // 设置播放语言
	// 语音播报结束时的回调
    speech.onend = (event) => {
       // 语音播报完需要清空展示内容
    }
}
speak('你好呀，我叫...')

增加语音循环播放

speak (msg) {
	  const repeatNum = 3
      var speech = this.speech = new SpeechSynthesisUtterance()
      speech.text = msg
      speech.pitch = 1 // 获取并设置话语的音调(0-2 默认1，值越大越尖锐,越低越低沉)
      speech.rate = 0.9 // 获取并设置说话的速度(0.1-10 默认1，值越大语速越快,越小语速越慢)
      speech.volume = 100 // 获取并设置说话的音量
      speech.lang = 'zh-CN' // 设置播放语言
      // 增加控制播放次数
      let count = 1
      speechSynthesis.speak(speech)
      while (count < repeatNum) {
        speechSynthesis.speak(speech)
        count++
      }
  },
  this.speak('我爱中国')

五、bug解析

出现改警告的原因是浏览器禁止不经过用户允许直接播放声音，导致声音无法播放，解决办法：

1. chrome://settings/content/sound添加允许播放声音的网站 （可自动语音播报）
   
   2.增加按钮，手动点击播放声音