fixed up speak

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

speak/index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" type="text/css" href="/menu/menu.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-  <title>Document</title>
+  <title>Speak</title>
   <style>
 
   </style>

speak/script.js

@@ -5,6 +5,22 @@ const textInput = document.getElementById('text')
 const speedInput = document.getElementById('speed')
 let currentCharacter
 
+
+const utterance = new SpeechSynthesisUtterance()
+
+utterance.addEventListener('end', () => {
+
+textInput.disabled = false
+
+})
+
+utterance.addEventListener('boundary', e => {
+
+currentCharacter = e.charIndex
+
+})
+
+
 playButton.addEventListener('click', () => {
   playText(textInput.value)
 })
@@ -15,14 +31,6 @@ speedInput.addEventListener('input', () => {
   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) {
@@ -40,6 +48,7 @@ function pauseText() {
 }
 
 function stopText() {
-  speechSynthesis.resume()
-  speechSynthesis.cancel()
+  speechSynthesis.resume();
+  speechSynthesis.cancel();
+  document.getElementById("text").value = ""
 }

speak/style.css

@@ -11,7 +11,7 @@ display: flex;
 justify-self: center;
 margin: auto;
 width: 75%;
-margin-top: 40%;
+margin-top: 30vh;
 padding: 7px;
 border-radius: 15px;
 font-size: 2rem;
@@ -27,6 +27,9 @@ label{
     width: 1rem;
 
 }
+#pause-button{
+    display: none;
+}
 .buttons_div{
     display: flex;
     flex-direction: row;