<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>

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
      }
  }
}