20: add my JavaScript code

skatsuta · skatsuta · commit b1763d5c735a · 2016-12-18T15:33:35.000+09:00
Signed-off-by: Soshi Katsuta &lt;soshi.katsuta@gmail.com&gt;
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
@@ -9,11 +9,7 @@
   <div class="words" contenteditable>
   </div>
 
-<script>
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-
-
-</script>
+<script src="script.js"></script>
 
 
   <style>
diff --git a/20 - Speech Detection/script.js b/20 - Speech Detection/script.js
@@ -0,0 +1,78 @@
+'use strict';
+
+class Notifier {
+  constructor() {
+    this.handlers = [];
+  }
+
+  addHandler(handler) {
+    this.handlers.push(handler);
+  }
+
+  notify() {
+    this.handlers.forEach(handler => handler());
+  }
+}
+
+class Recognition {
+  constructor(notifier) {
+    this.notifier = notifier;
+    this._text = '';
+  }
+
+  get text() {
+    return this._text;
+  }
+
+  set text(transcript) {
+    this._text = transcript;
+    this.notifyUpdate();
+  }
+
+  addHandler(handler) {
+    this.notifier.addHandler(handler);
+  }
+
+  notifyUpdate() {
+    this.notifier.notify();
+  }
+}
+
+class ViewModel {
+  constructor(words) {
+    this.words = words;
+    this.currentParagraph = document.createElement('p');
+    this.words.appendChild(this.currentParagraph);
+    this.recognition = new Recognition(new Notifier());
+
+    this.recognition.addHandler(() => {
+      this.text = this.recognition.text;
+    });
+    this.recognition.notifyUpdate();
+  }
+
+  recognize(ev) {
+    const transcript = Array.from(ev.results)
+      .map(result => result[0].transcript)
+      .join('');
+
+    this.recognition.text = transcript;
+    this.currentParagraph.textContent = this.text;
+
+    if (!ev.results[0].isFinal) { return; }
+
+    this.currentParagraph = document.createElement('p');
+    this.words.appendChild(this.currentParagraph);
+  }
+}
+
+window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+const recognition = new SpeechRecognition();
+recognition.interimResults = true;
+const words = document.querySelector('.words');
+const vm = new ViewModel(words);
+
+recognition.addEventListener('result', ev => vm.recognize(ev));
+recognition.addEventListener('end', recognition.start);
+recognition.start();
diff --git a/20 - Speech Detection/yarn.lock b/20 - Speech Detection/yarn.lock
