soyaine · soyaine · Sep 8, 2017 · Aug 22, 2017 · Aug 24, 2017 · Aug 25, 2017
diff --git a/20 - Speech Detection/README.md b/20 - Speech Detection/README.md
@@ -0,0 +1,52 @@
+# 20 Speech Detection 中文指南
+
+> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+
+> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 20 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
+
+> 创建时间：2017-09-04    
+最后更新：2017-09-07
+
+## 挑战任务
+本次的挑战任务，是利用浏览器内置`Web speech API`,将自己所说的话输出在页面上,仅chrome浏览器支持。   
+说明：由于只有chrome浏览器实现了该接口，而语音识别需要将捕捉到的信息发送至google服务器进行处理，故本文档只提供解决思路和参考代码。
+
+## 实现效果
+![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/20%20-%20Speech%20Detection/effects.png)
+
+## 相关知识
+有关语音识别接口`SpeechRecognition`的说明，可查看[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechRecognition)中的相关解释。
+
+## 基本思路   
+1.新建语音识别对象;   
+2.开启语音识别服务;   
+3.通过监听`result`事件，实时获取捕获到的语音信息;   
+4.通过监听`end`事件，当一次语音捕获结束后，重新开启该功能，实现持续的语音监听功能。   
+
+## 过程指南
+1.由于目前只有chrome浏览器实现了此功能，故直接使用带有前缀的构造函数来构建一个语音识别对象。   
+```js
+var speech = new webkitSpeechRecognition();
+```   
+2.设置语音识别对象的基本属性，并开启该功能。
+```js
+  speech.interimResults = true;
+  //返回即时语音，即时语音是指SpeechRecognitionResult.isFinal 为false时捕获到的信息。
+  speech.lang = 'en-US';//设置语音识别类别为英语
+  speech.start();//开启功能
+```   
+3.监听收到结果事件，将语音识别结果输出在DOM元素上。   
+```js
+  speech.addEventListener('result', (e) => {
+      const results = Array.from(e.results) 
+      // e.results中保存的是识别的结果，本来并不是数组，需要将其转换为数组，方便使用其map、join等方法。
+        .map(result => result[0])
+        .map(result => result.transcript) // 获取到每一段话，是一个数组类型
+        .join(''); // 将每一段话连接成字符串
+       //将结果输出在页面上
+        words.innerHTML = results;
+      }
+```
+
+## 延伸思考
+由于国内网络原因，可考虑使用[科大讯飞的语音识别sdk](http://www.xfyun.cn/)，感兴趣的同学可自行尝试实现。
diff --git a/20 - Speech Detection/effects.png b/20 - Speech Detection/effects.png
diff --git a/20 - Speech Detection/index-finished-Dashrun.html b/20 - Speech Detection/index-finished-Dashrun.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Speech Detection</title>
+</head>
+<body>
+
+  <div id="words" class="words" contenteditable>
+  </div>
+
+<script>
+  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+  var words = document.getElementById('words');
+
+  //新建一个语音识别对象
+  var speech = new webkitSpeechRecognition();
+  speech.interimResults = true;
+  speech.lang = 'en-US';
+  speech.start();
+
+//有结果返回时
+  speech.addEventListener('result', (e) => {
+      const results = Array.from(e.results) 
+      // e.results中保存的是识别的结果，本来并不是数组，需要将其转换为数组，方便使用其map、join等方法。
+        .map(result => result[0])
+        .map(result => result.transcript) // 获取到每一段话，是一个数组类型
+        .join(''); // 将每一段话连接成字符串
+       //将结果输出在页面上
+        words.innerHTML = results;
+      }
+
+
+//开始捕获到音频时
+speech.onaudiostart = function(e) {
+  console.log('start');
+}
+
+//出现错误时
+speech.onerror = function(e) {
+  console.log(e.error);
+}
+
+//语音识别结束时重新开始捕获语音
+ speech.onend = function(){
+     speech.start();
+ }
+
+</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;
+    }
+
+    .words:before {
+      content: '';
+      position: absolute;
+      width: 4px;
+      top: 0;
+      left: 30px;
+      bottom: 0;
+      border: 1px solid;
+      border-color: transparent #efe4e4;
+    }
+  </style>
+
+</body>
+</html>
diff --git a/20 - Speech Detection/index-start.html b/20 - Speech Detection/index-start.html
@@ -0,0 +1,60 @@
+<!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>
+
+
+  <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;
+    }
+
+    .words:before {
+      content: '';
+      position: absolute;
+      width: 4px;
+      top: 0;
+      left: 30px;
+      bottom: 0;
+      border: 1px solid;
+      border-color: transparent #efe4e4;
+    }
+  </style>
+
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -58,7 +58,7 @@ No | Guide | Demo
 16 | [Mouse Move Shadow 指南](https://github.com/dashrun/JavaScript30/blob/master/16%20-%20Mouse%20Move%20Shadow/README.md) | [文字阴影随鼠标移动在线效果](https://soyaine.github.io/JavaScript30/16%20-%20Mouse%20Move%20Shadow/index-finished-es5.html)
 17 | [Sort Without Articles 指南](https://github.com/soyaine/JavaScript30/blob/master/17%20-%20Sort%20Without%20Articles/README.md) | [去前缀排序在线效果](https://soyaine.github.io/JavaScript30/17%20-%20Sort%20Without%20Articles/index-finished-Dashrun-es5.html)  
 18 | [Adding Up Times with Reduce 指南](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce) | [使用 Reduce 进行时间叠加效果](https://soyaine.github.io/JavaScript30/18%20-%20AddingUpTimesWithReduce/index-finished-Dashrun-es6.html)    
-19 | Webcam Fun |  -  
+19 | [Webcam Fun 指南](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/README.md) | [网络摄像头及图片处理在线效果](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/index-finished-Dashrun.html)  
 20 | Speech Detection | -   
 21 | Geolocation |  -  
 22 | Follow Along Link Highlighter |  -  
@@ -80,7 +80,7 @@ Name | Contribution
 [@DrakeXiang](https://github.com/DrakeXiang) |  No.[11](https://github.com/soyaine/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player)
 [@zzh466](http://github.com/zzh466) | Review
 [@Xing Liu](https://github.com/S1ngS1ng) | Review
-[@大史快跑Dashrun](https://github.com/dashrun) |  No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce)
+[@大史快跑Dashrun](https://github.com/dashrun) |  No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun)
 [@缉熙Soyaine](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying)
 
 ## JOIN US