SpeechSynthesisUtterance基本介绍

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

SpeechSynthesisUtterance基本属性

• SpeechSynthesisUtterance.lang 获取并设置话语的语言
• SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
• SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
• SpeechSynthesisUtterance.text 获取并设置说话时的文本
• SpeechSynthesisUtterance.voice 获取并设置说话的声音
• SpeechSynthesisUtterance.volume 获取并设置说话的音量

SpeechSynthesisUtterance.text基本方法

• speak() 将对应的实例添加到语音队列中
• cancel() 删除队列中所有的语音.如果正在播放,则直接停止
• pause() 暂停语音
• resume() 恢复暂停的语音
• getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效

项目实战(可直接复制执行)

• html部分

  <div class="voiceinator">
    <h1>听说 5000</h1>
    
    <select name="voice" id="voices">
      <option value="">Select A Voice</option>
    </select>
    
    <label for="rate">Rate:</label>
    <input name="rate" type="range" min="0" max="3" value="1" step="0.1">
    
    <label for="pitch">Pitch:</label>
    <input name="pitch" type="range" min="0" max="2" step="0.1">
    
    <textarea name="text">你好 给你点👍</textarea>
    
    <button id="stop">Stop!</button>
    <button id="speak">Speak</button>
  </div>
  

• js部分

  const synth = window.speechSynthesis
  const msg = new SpeechSynthesisUtterance()
  let voices = []
  const voicesDropdown = document.querySelector('[name="voice"]')
  const options = document.querySelectorAll('[type="range"], [name="text"]')
  const speakButton = document.querySelector('#speak')
  const stopButton = document.querySelector('#stop')
  
  msg.text = '你好 给你点👍'
  msg.lang = 'zh-CN'
  
  synth.addEventListener('voiceschanged',getSupportVoices)
  speakButton.addEventListener('click',throttle(handleSpeak,1000))
  stopButton.addEventListener('click',handleStop)
  options.forEach(e => e.addEventListener('change',handleChange))
  
  function getSupportVoices() {
      voices = synth.getVoices()
      voices.forEach(e => {
          const option = document.createElement('option')
          option.value = e.lang
          option.text = e.name
          voicesDropdown.appendChild(option)
       })
  }
  function handleSpeak(e) {
      msg.lang = voicesDropdown.selectedOptions[0].value
      synth.speak(msg)
  }
  function handleStop(e) {
      synth.cancel(msg)
  }
  function handleChange(e) {
      msg[this.name] = this.value
  }
  function throttle(fn,delay) {
      let last = 0
      return function() {
          const now = new Date()
          if(now - last > delay) {
              fn.apply(this,arguments)
              last = now
          }
      }
  }
  

代码解读(html部分)

• 页面布局方面就是通过select下拉菜单选择需要转换为什么语言.具体包括什么语言是通过js动态加载的
• 其次分别用两个input的滑动来选择语音播报的速度和音调
• 通过修改textarea来设置需要播报的文字内容
• 最后通过按钮来控制语音的播报和停止

代码解读(js部分)

• 首先通过const synth = window.speechSynthesis来创建语音,用const msg = new SpeechSynthesisUtterance()来创建文本实例
• 设置默认播报的文本和语言:msg.text和msg.lang
• 通过voiceschanged事件来动态获取支持的语言种类,并生成options添加到html中.其中最主要的方法就是synth.getVoices()获取.各位可以通过自行打印获取到的数组查看具体包含的属性
• 创建按钮点击事件,分别通过synth.speak(msg)和synth.cancel(msg)来播放和取消播放
• 在播放前通过voicesDropdown.selectedOptions[0].value来设置文本的语言(这里如果文本的内容语言和播报选择的语言不一致的话会出现乱读的情况)
• 最后添加了一个节流函数,防止多次点击按钮不断播放(最好是能获取播放的时长,或监听播报完毕事件,这里就是简单的2秒识别一次,有兴趣的小伙伴可以自行编写)

总结

• 总体来说除了对这个API陌生一些,基本没什么晦涩的代码.做一个基础的了解即可