speechRecognition.jade

extends base

block vars
  - var title = 'Speech Recognition'

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

block body

  .words(contenteditable)

  script(type="text/javascript").
    window.SpeechRecognition =  window.SpeechRecognition || window.webkitSpeechRecognition

    const recognition = new SpeechRecognition()
    recognition.interimResults = true

    let $p = document.createElement('p')
    const $words = document.querySelector('.words')
    $words.appendChild($p)

    recognition.addEventListener('result', (e) => {
      const transcript = Array.from(e.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join('')

      const modifiedScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
      $p.textContent = modifiedScript

      if (e.results[0].isFinal) {
        $p = document.createElement('p')
        $words.appendChild($p)
      }
    })

    recognition.addEventListener('end', recognition.start)

    recognition.start()