Speech Detection

diff --git a/20 - Speech Detection/README.md b/20 - Speech Detection/README.md new file mode 100644 index 0000000..a2070a0 --- /dev/null +++ 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 new file mode 100644 index 0000000..e4ed64a Binary files /dev/null and b/20 - Speech Detection/effects.png differ diff --git a/20 - Speech Detection/index-finished-Dashrun.html b/20 - Speech Detection/index-finished-Dashrun.html new file mode 100644 index 0000000..60328d2 --- /dev/null +++ b/20 - Speech Detection/index-finished-Dashrun.html @@ -0,0 +1,93 @@ + + + + + Speech Detection + + + +

+ + + + + + + + diff --git a/20 - Speech Detection/index-start.html b/20 - Speech Detection/index-start.html new file mode 100644 index 0000000..fa472df --- /dev/null +++ b/20 - Speech Detection/index-start.html @@ -0,0 +1,60 @@ + + + + + Speech Detection + + + +

+ + + + + + + + diff --git a/README.md b/README.md index 620aed9..99dd30d 100644 --- 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