Proj 20: finish.

jdstein1 · jdstein1 · commit bbc632f6d835 · 2017-02-06T15:15:05.000-06:00
diff --git a/20--Speech_Detection/index-jds.html b/20--Speech_Detection/index-jds.html
@@ -1,60 +1,87 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Speech Detection</title>
+<meta charset="UTF-8">
+<title>Speech Detection</title>
 </head>
 <body>
 
-  <div class="words" contenteditable>
-  </div>
+<div class="words" contenteditable></div>
 
 <script>
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
+window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
-</script>
+const recog = new SpeechRecognition();
+recog.interimResults = true;
 
+let p = document.createElement("p");
+const words = document.querySelector(".words");
+words.appendChild(p);
 
-  <style>
-    html {
-      font-size: 10px;
+recog.addEventListener("result", e => {
+  // console.log(e.results);
+  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);
     }
+  console.log(transcript);
+})
 
-    body {
-      background:#ffc600;
-      font-family: 'helvetica neue';
-      font-weight: 200;
-      font-size: 20px;
-    }
+recog.addEventListener("end", recog.start);
 
-    .words {
-      max-width:500px;
-      margin:50px auto;
-      background:white;
-      border-radius:5px;
-      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 0;
-    }
+recog.start();
 
-    .words:before {
-      content: '';
-      position: absolute;
-      width: 4px;
-      top: 0;
-      left: 30px;
-      bottom: 0;
-      border: 1px solid;
-      border-color: transparent #efe4e4;
-    }
-  </style>
+</script>
+
+
+<style>
+
+html {
+  font-size: 10px;
+}
+
+body {
+  background:#ffc600;
+  font-family: 'helvetica neue';
+  font-weight: 200;
+  font-size: 20px;
+}
+
+.words {
+  max-width:500px;
+  margin:50px auto;
+  background:white;
+  border-radius:5px;
+  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 0;
+}
+
+.words:before {
+  content: '';
+  position: absolute;
+  width: 4px;
+  top: 0;
+  left: 30px;
+  bottom: 0;
+  border: 1px solid;
+  border-color: transparent #efe4e4;
+}
+
+</style>
 
 </body>
 </html>
