speechSynthesis.jade

extends base

block vars
  - var title = 'Speech Synthesis'

block styles
  link(rel="stylesheet" type="text/css" href="styles/speechSynthesis.css")

block body

  .voiceinator
    h1 The Voiceinator 5000

    select#voices(name="voice")
      option(value="") Select A Voice

    label(for="rate") Rate:
    input(name="rate" type="range" min="0" max="3" value="1" step="0.1")

    label(for="pitch") Pitch:
    input(name="pitch" type="range" min="0" max="2" step="0.1")

    textarea(name="text") Hello! I love Javascript 👍
    button#stop Stop!
    button#speak Speak

  script(type="text/javascript").
    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 = document.querySelector('[name="text"]').value

    function populateVoices() {
      voices = this.getVoices()
      $voicesDropdown.innerHTML = voices
        .filter(voice => voice.lang.includes('en'))
        .map(voice =>
          `<option
            value="${voice.name}">
            ${voice.name} (${voice.lang})
          </option>`
        ).join('')
    }

    function setVoice() {
      msg.voice = voices.find(voice => voice.name === this.value)
      toggle()
    }

    function toggle(startOver = true) {
      speechSynthesis.cancel()

      if (startOver)
        speechSynthesis.speak(msg)
    }

    function setOption() {
      msg[this.name] = this.value
      toggle()
    }

    speechSynthesis.addEventListener('voiceschanged', populateVoices)
    $voicesDropdown.addEventListener('change', setVoice)
    $options.forEach(option => option.addEventListener('change', setOption))
    $speakButton.addEventListener('click', toggle)
    $stopButton.addEventListener('click', toggle.bind(null, false))