From f7d720f3ca9240807bdb1a8caec41a657977ee68 Mon Sep 17 00:00:00 2001
From: Ngene Arinzechukwu <120824375+emmanuel-455@users.noreply.github.com>
Date: Fri, 22 Mar 2024 02:32:27 +0100
Subject: [PATCH] Update index-FINISHED.html

 There are a few improvements and modifications that can be made
---
 23 - Speech Synthesis/index-FINISHED.html | 78 ++++++++++++++---------
 1 file changed, 47 insertions(+), 31 deletions(-)

diff --git a/23 - Speech Synthesis/index-FINISHED.html b/23 - Speech Synthesis/index-FINISHED.html
index 8127931af7..389ce2c458 100644
--- a/23 - Speech Synthesis/index-FINISHED.html	
+++ b/23 - Speech Synthesis/index-FINISHED.html	
@@ -31,44 +31,60 @@ <h1>The Voiceinator 5000</h1>
 
 <script>
   const msg = new SpeechSynthesisUtterance();
-  let voices = [];
-  const voicesDropdown = document.querySelector('[name="voice"]');
-  const options = document.querySelectorAll('[type="range"], [name="text"]');
-  const speakButton = document.querySelector('#speak');
-  const stopButton = document.querySelector('#stop');
-  msg.text = document.querySelector('[name="text"]').value;
-
-  function populateVoices() {
-    voices = this.getVoices();
-    voicesDropdown.innerHTML = voices
-      .filter(voice => voice.lang.includes('en'))
-      .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
-      .join('');
-  }
+let voices = [];
+const voicesDropdown = document.querySelector('[name="voice"]');
+const options = document.querySelectorAll('[type="range"], [name="text"]');
+const speakButton = document.querySelector('#speak');
+const stopButton = document.querySelector('#stop');
+
+// Function to initialize voices list and populate dropdown
+function populateVoices() {
+  voices = speechSynthesis.getVoices();
+  voicesDropdown.innerHTML = voices
+    .filter(voice => voice.lang.includes('en'))
+    .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
+    .join('');
 
-  function setVoice() {
-    msg.voice = voices.find(voice => voice.name === this.value);
-    toggle();
+  // Update the voice of the message if it's already set
+  if (msg.voice && voices.includes(msg.voice)) {
+    voicesDropdown.value = msg.voice.name;
   }
+}
+
+// Function to set the voice of the message
+function setVoice() {
+  msg.voice = voices.find(voice => voice.name === this.value) || voices[0];
+  toggle();
+}
 
-  function toggle(startOver = true) {
+// Function to set options of the message
+function setOption() {
+  console.log(this.name, this.value);
+  msg[this.name] = this.value;
+  toggle();
+}
+
+// Function to start or stop speech synthesis
+function toggle(startOver = true) {
+  if (startOver) {
+    speechSynthesis.cancel();
+    speechSynthesis.speak(msg);
+  } else {
     speechSynthesis.cancel();
-    if (startOver) {
-      speechSynthesis.speak(msg);
-    }
   }
+}
 
-  function setOption() {
-    console.log(this.name, this.value);
-    msg[this.name] = this.value;
-    toggle();
-  }
+// Event listeners
+speechSynthesis.addEventListener('voiceschanged', populateVoices);
+voicesDropdown.addEventListener('change', setVoice);
+options.forEach(option => option.addEventListener('change', setOption));
+speakButton.addEventListener('click', toggle);
+stopButton.addEventListener('click', () => toggle(false));
 
-  speechSynthesis.addEventListener('voiceschanged', populateVoices);
-  voicesDropdown.addEventListener('change', setVoice);
-  options.forEach(option => option.addEventListener('change', setOption));
-  speakButton.addEventListener('click', toggle);
-  stopButton.addEventListener('click', () => toggle(false));
+// Update msg.text when the text input changes
+document.querySelector('[name="text"]').addEventListener('input', function() {
+  msg.text = this.value;
+});
 
 </script>