Project 20 complete

wwags33 · wwags33 · commit c80c60327de6 · 2020-03-03T17:52:03.000-05:00
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
@@ -1,19 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Speech Detection</title>
 </head>
+
 <body>
 
   <div class="words" contenteditable>
   </div>
 
-<script>
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-
-
-</script>
+  <script src="typescripts.js"></script>
 
 
   <style>
@@ -33,14 +31,14 @@
       margin: 50px auto;
       background: white;
       border-radius: 5px;
-      box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
+      box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
       padding: 1rem 2rem 1rem 5rem;
       background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
       background-size: 100% 3rem;
       position: relative;
       line-height: 3rem;
     }
-    
+
     p {
       margin: 0 0 3rem;
     }
@@ -58,4 +56,5 @@
   </style>
 
 </body>
-</html>
+
+</html>
diff --git a/20 - Speech Detection/typescripts.js b/20 - Speech Detection/typescripts.js
@@ -0,0 +1,22 @@
+window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+const recognition = new SpeechRecognition();
+recognition.interimResults = true;
+let p = document.createElement('p');
+const words = document.querySelector('.words');
+words.appendChild(p);
+recognition.addEventListener('result', e => {
+    const transcript = Array.from(e.results)
+        .map(result => result[0])
+        .map(result => result.transcript)
+        .join('');
+    p.textContent = transcript;
+    if (e.results[0].isFinal) {
+        p = document.createElement('p');
+        words.appendChild(p);
+        if (transcript.includes('unicorn')) {
+            console.log('🦄🦄🦄🦄🦄🦄🦄');
+        }
+    }
+});
+recognition.addEventListener('end', recognition.start);
+recognition.start();
diff --git a/20 - Speech Detection/typescripts.ts b/20 - Speech Detection/typescripts.ts
@@ -0,0 +1,44 @@
+/**
+ * JavaScript30 by Wes Bos, https://javascript30.com/
+ * TypeScript implementation by Will Wager
+ * Project: Speech Detection
+ * Concepts: Speech Recognition API
+ * Key takeaways: Chrome and Edge have native speech recognition;
+ *   The transcript can be used to trigger any other actions.
+ * Sidenotes: es6 needed for Array.from; needed to extend window interface to add prefixed API.
+ * Compilation command:
+ *   tsc --removeComments --strictNullChecks --noImplicitAny --target es6 typescripts.ts
+ */
+
+interface Window {
+  webkitSpeechRecognition: any;
+}
+
+window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+const recognition = new SpeechRecognition();
+recognition.interimResults = true;
+
+let p = document.createElement('p');
+const words = document.querySelector('.words')! as HTMLDivElement;
+words.appendChild(p);
+
+recognition.addEventListener('result', e => {
+  const transcript = Array.from(e.results)
+    .map(result => result[0])
+    .map(result => result.transcript)
+    .join('');
+
+  p.textContent = transcript;
+  if (e.results[0].isFinal) {
+    p = document.createElement('p');
+    words.appendChild(p);
+    if (transcript.includes('unicorn')) {
+      console.log('🦄🦄🦄🦄🦄🦄🦄');
+    }
+  }
+});
+
+recognition.addEventListener('end', recognition.start);
+
+recognition.start();
