text readers code example

Example: text to speech

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    // HTML classes for converting entered text to speech format
  	const playButton = document.getElementById('play-button')
    const pauseButton = document.getElementById('pause-button')
    const stopButton = document.getElementById('stop-button')
    const textInput = document.getElementById('text')
    const speedInput = document.getElementById('speed')
    let currentCharacter
	
    // when play button clicked, call playText function later implemented
    playButton.addEventListener('click', () => {
      playText(textInput.value)
    })
    
    // add click event listener
    pauseButton.addEventListener('click', pauseText)
    stopButton.addEventListener('click', stopText)
    speedInput.addEventListener('input', () => {
      stopText()
      playText(utterance.text.substring(currentCharacter))
    })

    // speech synthesis
    const utterance = new SpeechSynthesisUtterance()
    utterance.addEventListener('end', () => {
      textInput.disabled = false
    })
    utterance.addEventListener('boundary', e => {
      currentCharacter = e.charIndex
    })

    // playing the read text from textare in HTML
    function playText(text) {
      if (speechSynthesis.paused && speechSynthesis.speaking) {
        return speechSynthesis.resume()
      }
      if (speechSynthesis.speaking) return
      utterance.text = text
      utterance.rate = speedInput.value || 1
      textInput.disabled = true
      speechSynthesis.speak(utterance)
    }

    // when pause button clicked, program will use .pause to pause playback of text
    function pauseText() {
      if (speechSynthesis.speaking) speechSynthesis.pause()
    }

    // cancels reading of the text
    function stopText() {
      speechSynthesis.resume()
      speechSynthesis.cancel()
    }
  </script>
  <style>
    /*CSS Styles*/
    body {
      width: 90%;
      margin: 0 auto;
      margin-top: 1rem;
    }

    #text {
      width: 100%;
      height: 50vh;
    }
  </style>
  <script src="script.js" defer></script>
</head>
<body>
  <textarea id="text"></textarea>
  <label for="speed">Speed</label>
  <input type="number" name="spee" id="speed" min=".5" max="3" step=".5" value="1">
  <button id="play-button">Play</button>
  <button id="pause-button">Pause</button>
  <button id="stop-button">Stop</button>
</body>
</html>

Tags:

Misc Example

Recent Posts