text sppech 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;
}
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>