From 248aa3813ac472ff1623bed245b76787b51f2cb4 Mon Sep 17 00:00:00 2001
From: changicho <changicho29@gmail.com>
Date: Wed, 24 Jun 2020 18:56:25 +0900
Subject: [PATCH] Feat: Add 23 - Speech Synthesis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

?: SpeechSynthesisUtterance 객체를 이용해 TTS
인자로 함수를 넘길 때 내부 인자까지 넘기기 위해선
bind 를 사용할 수 있다.
그러나 그냥 내부 함수에서 직접 실행하는 편이 더 깔끔함
---
 23 - Speech Synthesis/changi.html | 82 +++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 23 - Speech Synthesis/changi.html
diff --git a/23 - Speech Synthesis/changi.html b/23 - Speech Synthesis/changi.html
new file mode 100644
index 0000000..b9880e5
--- /dev/null
+++ b/23 - Speech Synthesis/changi.html	
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Speech Synthesis</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Pacifico"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="voiceinator">
+      <h1>The Voiceinator 5000</h1>
+
+      <select name="voice" id="voices">
+        <option value="">Select A Voice</option>
+      </select>
+
+      <label for="rate">Rate:</label>
+      <input name="rate" type="range" min="0" max="3" value="1" step="0.1" />
+
+      <label for="pitch">Pitch:</label>
+
+      <input name="pitch" type="range" min="0" max="2" step="0.1" />
+      <textarea name="text">Hello! I love JavaScript 👍</textarea>
+      <button id="stop">Stop!</button>
+      <button id="speak">Speak</button>
+    </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");
+
+      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("");
+      }
+      function setVoice() {
+        msg.voice = voices.find((voice) => voice.name === this.value);
+        toggle();
+      }
+      function toggle(startover = true) {
+        speechSynthesis.cancel();
+
+        if (startover) {
+          speechSynthesis.speak(msg);
+        }
+      }
+      function setOption() {
+        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(false);
+      });
+    </script>
+  </body>
+</html>
