Merge pull request #283 from Likhita4403/Likhita4403/issue251

Add pause and resume to Text to Speech extension

Text To Speech/index.html

@@ -11,9 +11,13 @@
     <div class="container">
       <header>Text to Speech Converter</header>
       <textarea placeholder="Enter text"></textarea>
-      <button>Convert to Speech</button>
+      <button id="convertButton">Convert to Speech</button>
+      <div class="pauseresume">
+        <button id="pauseButton">Pause</button>
+        <button id="resumeButton">Resume</button>
+      </div>
     </div>
 
     <script src="scripts/script.js" defer></script>
   </body>
-</html>
+</html>

Text To Speech/scripts/script.js

@@ -1,92 +1,107 @@
 document.addEventListener("DOMContentLoaded", () => {
-
+  // Get references to the textarea and buttons
   const textarea = document.querySelector("textarea");
-  const button = document.querySelector("button");
+  const convertButton = document.getElementById("convertButton");
+  const pauseButton = document.getElementById("pauseButton");
+  const resumeButton = document.getElementById("resumeButton");
+
+  // Initialize state variables
   let isSpeaking = false;
-  let synth;
+  let synth = window.speechSynthesis;
+  let utterance;
 
-  const initTextToSpeech = async () => {
-    // Check if Speech Synthesis API is supported
+  // Initialize and start the text-to-speech process
+  const initTextToSpeech = () => {
+    // Check if the Speech Synthesis API is supported
     if (!('speechSynthesis' in window)) {
       alert("Your browser does not support the Speech Synthesis API.");
       return;
     }
 
-    synth = window.speechSynthesis;
+    // Get the text from the textarea
     const text = textarea.value.trim();
-
+    
     // Check if there is text to speak
     if (!text) {
       alert("Please enter some text to convert to speech.");
       return;
     }
 
-    // If not speaking and there is text, start speaking
+    // Start speaking if not already speaking
     if (!synth.speaking) {
       try {
-        const utterance = new SpeechSynthesisUtterance(text);
-
+        // Create a new SpeechSynthesisUtterance with the text
+        utterance = new SpeechSynthesisUtterance(text);
+
+        // Handle errors during speech synthesis
         utterance.onerror = handleSpeechError;
+
+        // Handle the end of the speech synthesis
         utterance.onend = () => {
           isSpeaking = false;
-          button.innerText = "Convert to Speech";
+          convertButton.innerText = "Convert to Speech";
+          console.log("Speech synthesis finished.");
         };
 
+        // Start speaking the utterance
         synth.speak(utterance);
         isSpeaking = true;
-        button.innerText = "Pause";
+        convertButton.innerText = "Speaking";
+        console.log("Started speaking:", text);
       } catch (error) {
         handleSpeechError({ error });
       }
     }
-
-    manageSpeechState();
   };
 
+  // Handle speech synthesis errors
   const handleSpeechError = (event) => {
-    console.error("Speech synthesis error:", event.error);
-    alert("An error occurred during speech synthesis: " + event.error);
+    console.error("Speech synthesis error:", event.error || event);
+    alert("An error occurred during speech synthesis: " + (event.error || event));
     resetSpeechState();
   };
 
-  const manageSpeechState = () => {
-    if (textarea.value.trim().length > 50) {
-      if (synth.speaking) {
-        button.innerText = "Pause";
-      } else {
-        button.innerText = "Resume";
-      }
-    } else {
-      resetSpeechState();
-    }
-  };
-
+  // Reset the speech state and update the button text
   const resetSpeechState = () => {
     isSpeaking = false;
-    button.innerText = "Convert to Speech";
+    convertButton.innerText = "Convert to Speech";
   };
 
-  const toggleSpeech = async () => {
-    if (isSpeaking) {
-      if (synth.paused) {
-        synth.resume();
-        button.innerText = "Pause";
-      } else {
-        synth.pause();
-        button.innerText = "Resume";
-      }
-    } else {
-      await initTextToSpeech();
+  // Pause the speech synthesis
+  const pauseSpeech = () => {
+    if (synth.speaking && !synth.paused) {
+      synth.pause();
+      convertButton.innerText = "Paused...";
+      console.log("Paused speech synthesis.");
     }
   };
 
-  // Add event listener to button
-  button.addEventListener("click", toggleSpeech);
+  // Resume the speech synthesis
+  const resumeSpeech = () => {
+    if (synth.paused) {
+      synth.resume();
+      convertButton.innerText = "Speaking...";
+      console.log("Resumed speech synthesis.");
+    }
+  };
+
+  // Add event listener to the convert button to start speech synthesis
+  convertButton.addEventListener("click", () => {
+    if (!isSpeaking) {
+      initTextToSpeech();
+    }
+  });
+
+  // Add event listener to the pause button to pause speech synthesis
+  pauseButton.addEventListener("click", pauseSpeech);
+
+  // Add event listener to the resume button to resume speech synthesis
+  resumeButton.addEventListener("click", resumeSpeech);
 
   // Periodically check if the speech synthesis has stopped unexpectedly
   setInterval(() => {
     if (synth && !synth.speaking && isSpeaking) {
       resetSpeechState();
     }
   }, 100);
-});
+});

Text To Speech/src/style.css

@@ -48,6 +48,13 @@ button {
   cursor: pointer;
   transition: all 0.3s ease;
 }
+
+.pauseresume{
+  display: flex;
+  column-gap: 2%;
+  margin-top: 2%;
+}
+
 button:hover {
   background: #4070f4;
 }