From 8a03c472a5d4709a350aabf3e2f113cb07adaeff Mon Sep 17 00:00:00 2001 From: chris Date: Thu, 3 Mar 2022 09:43:16 -0500 Subject: [PATCH] speak --- speak/index.html | 33 ++++++++++++++++++++++++++++++ speak/script.js | 45 +++++++++++++++++++++++++++++++++++++++++ speak/style.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 130 insertions(+) create mode 100644 speak/index.html create mode 100644 speak/script.js create mode 100644 speak/style.css diff --git a/speak/index.html b/speak/index.html new file mode 100644 index 0000000..263ae15 --- /dev/null +++ b/speak/index.html @@ -0,0 +1,33 @@ + + + + + + + + + Document + + + + +
+ + + + + +
+ + + +
+ +
+ + + + + \ No newline at end of file diff --git a/speak/script.js b/speak/script.js new file mode 100644 index 0000000..d2ae51e --- /dev/null +++ b/speak/script.js @@ -0,0 +1,45 @@ +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 + +playButton.addEventListener('click', () => { + playText(textInput.value) +}) +pauseButton.addEventListener('click', pauseText) +stopButton.addEventListener('click', stopText) +speedInput.addEventListener('input', () => { + stopText() + playText(utterance.text.substring(currentCharacter)) +}) + +const utterance = new SpeechSynthesisUtterance() +utterance.addEventListener('end', () => { + textInput.disabled = false +}) +utterance.addEventListener('boundary', e => { + currentCharacter = e.charIndex +}) + + +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) +} + +function pauseText() { + if (speechSynthesis.speaking) speechSynthesis.pause() +} + +function stopText() { + speechSynthesis.resume() + speechSynthesis.cancel() +} \ No newline at end of file diff --git a/speak/style.css b/speak/style.css new file mode 100644 index 0000000..b088548 --- /dev/null +++ b/speak/style.css @@ -0,0 +1,52 @@ +body { + + + +background-color: darkred; +} + + +#text { +display: flex; +justify-self: center; +margin: auto; +width: 75%; +margin-top: 40%; +padding: 7px; +border-radius: 15px; +font-size: 2rem; + +} +label{ + display: none +} + +#speed{ + display: none; + justify-self: center; + width: 1rem; + +} +.buttons_div{ + display: flex; + flex-direction: row; + justify-content: center; +} +.buttons{ +display: flex; +justify-content: center; +align-content: center; +margin: 2rem; +background-color: transparent; +font-size: 5rem; +flex-direction: row; +border: none; +} + + +main{ + display: flex; + align-content: center; + flex-direction: column; + justify-content: center; +}