js30 day 23

johnpdang · johnpdang · commit 6cbb134c0b57 · 2020-11-24T15:13:02.000-08:00
diff --git a/23 - Speech Synthesis/index.html b/23 - Speech Synthesis/index.html
@@ -28,14 +28,6 @@ <h1>The Voiceinator 5000</h1>
 
     </div>
 
-<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');
-</script>
   <script src="js/script.js"></script>
 </body>
 </html>
diff --git a/23 - Speech Synthesis/js/script.js b/23 - Speech Synthesis/js/script.js
@@ -0,0 +1,42 @@
+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();
+  //   console.log(voices);
+  voicesDropdown.innerHTML = voices
+    .filter((voice) => voice.lang.includes("en"))
+    .map((voice) => `<option value="${voice.name}"> (${voice.lang})</option>`)
+    .join("");
+}
+
+function setVoice() {
+  //   console.log(this.value);
+  msg.voice = voices.find((voice) => voice.name === this.value);
+}
+
+function toggle(startOver = true) {
+  speechSynthesis.cancel();
+  if (startOver) {
+    speechSynthesis.speak(msg);
+  }
+}
+
+function setOption() {
+  console.log(this.name, this.value);
+  msg[this.name] = this.value;
+  toggle();
+}
+
+speechSynthesis.addEventListener("voiceschanged", populateVoices);
+voicesDropdown.addEventListener("change", setVoice);
+options.forEach((option) => option.addEventListener("change", setOption));
+speakButton.addEventListener("click", toggle);
+// stopButton.addEventListener("click", toggle.bind(null, false));
+stopButton.addEventListener("click", () => toggle(false));
