Skip to content

Commit c9f3a0b

Browse files
dashnowordsdashnowords
committed
finish the work of day20 ,update the main readme.md
1 parent 08b430e commit c9f3a0b

File tree

5 files changed

+207
-2
lines changed

5 files changed

+207
-2
lines changed

‎20 - Speech Detection/README.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# 20 Speech Detection 中文指南
2+
3+
> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
4+
5+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 20 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
6+
7+
> 创建时间：2017-09-04
8+
最后更新：2017-09-07
9+
10+
## 挑战任务
11+
本次的挑战任务，是利用浏览器内置`Web speech API`,将自己所说的话输出在页面上,仅chrome浏览器支持。
12+
说明：由于只有chrome浏览器实现了该接口，而语音识别需要将捕捉到的信息发送至google服务器进行处理，故本文档只提供解决思路和参考代码。
13+
14+
## 实现效果
15+
![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/20%20-%20Speech%20Detection/effects.png)
16+
17+
## 相关知识
18+
有关语音识别接口`SpeechRecognition`的说明，可查看[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechRecognition)中的相关解释。
19+
20+
## 基本思路
21+
1.新建语音识别对象;
22+
2.开启语音识别服务;
23+
3.通过监听`result`事件，实时获取捕获到的语音信息;
24+
4.通过监听`end`事件，当一次语音捕获结束后，重新开启该功能，实现持续的语音监听功能。
25+
26+
## 过程指南
27+
1.由于目前只有chrome浏览器实现了此功能，故直接使用带有前缀的构造函数来构建一个语音识别对象。
28+
```js
29+
var speech = new webkitSpeechRecognition();
30+
```
31+
2.设置语音识别对象的基本属性，并开启该功能。
32+
```js
33+
speech.interimResults = true;
34+
//返回即时语音，即时语音是指SpeechRecognitionResult.isFinal 为false时捕获到的信息。
35+
speech.lang = 'en-US';//设置语音识别类别为英语
36+
speech.start();//开启功能
37+
```
38+
3.监听收到结果事件，将语音识别结果输出在DOM元素上。
39+
```js
40+
speech.addEventListener('result', (e) => {
41+
const results = Array.from(e.results)
42+
// e.results中保存的是识别的结果，本来并不是数组，需要将其转换为数组，方便使用其map、join等方法。
43+
.map(result => result[0])
44+
.map(result => result.transcript) // 获取到每一段话，是一个数组类型
45+
.join(''); // 将每一段话连接成字符串
46+
//将结果输出在页面上
47+
words.innerHTML = results;
48+
}
49+
```
50+
51+
## 延伸思考
52+
由于国内网络原因，可考虑使用[科大讯飞的语音识别sdk](http://www.xfyun.cn/)，感兴趣的同学可自行尝试实现。

‎20 - Speech Detection/effects.png

20.4 KB
Loading

‎20 - Speech Detection/index-finished-Dashrun.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Speech Detection</title>
6+
</head>
7+
<body>
8+
9+
<div id="words" class="words" contenteditable>
10+
</div>
11+
12+
<script>
13+
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
14+
var words = document.getElementById('words');
15+
16+
//新建一个语音识别对象
17+
var speech = new webkitSpeechRecognition();
18+
speech.interimResults = true;
19+
speech.lang = 'en-US';
20+
speech.start();
21+
22+
//有结果返回时
23+
speech.addEventListener('result', (e) => {
24+
const results = Array.from(e.results)
25+
// e.results中保存的是识别的结果，本来并不是数组，需要将其转换为数组，方便使用其map、join等方法。
26+
.map(result => result[0])
27+
.map(result => result.transcript) // 获取到每一段话，是一个数组类型
28+
.join(''); // 将每一段话连接成字符串
29+
//将结果输出在页面上
30+
words.innerHTML = results;
31+
}
32+
33+
34+
//开始捕获到音频时
35+
speech.onaudiostart = function(e) {
36+
console.log('start');
37+
}
38+
39+
//出现错误时
40+
speech.onerror = function(e) {
41+
console.log(e.error);
42+
}
43+
44+
//语音识别结束时重新开始捕获语音
45+
speech.onend = function(){
46+
speech.start();
47+
}
48+
49+
</script>
50+
51+
52+
<style>
53+
html {
54+
font-size: 10px;
55+
}
56+
57+
body {
58+
background:#ffc600;
59+
font-family: 'helvetica neue';
60+
font-weight: 200;
61+
font-size: 20px;
62+
}
63+
64+
.words {
65+
max-width:500px;
66+
margin:50px auto;
67+
background:white;
68+
border-radius:5px;
69+
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
70+
padding:1rem 2rem 1rem 5rem;
71+
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
72+
background-size: 100% 3rem;
73+
position: relative;
74+
line-height:3rem;
75+
}
76+
p {
77+
margin: 0 0 3rem;
78+
}
79+
80+
.words:before {
81+
content: '';
82+
position: absolute;
83+
width: 4px;
84+
top: 0;
85+
left: 30px;
86+
bottom: 0;
87+
border: 1px solid;
88+
border-color: transparent #efe4e4;
89+
}
90+
</style>
91+
92+
</body>
93+
</html>

‎20 - Speech Detection/index-start.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Speech Detection</title>
6+
</head>
7+
<body>
8+
9+
<div class="words" contenteditable>
10+
</div>
11+
12+
<script>
13+
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
14+
15+
16+
</script>
17+
18+
19+
<style>
20+
html {
21+
font-size: 10px;
22+
}
23+
24+
body {
25+
background:#ffc600;
26+
font-family: 'helvetica neue';
27+
font-weight: 200;
28+
font-size: 20px;
29+
}
30+
31+
.words {
32+
max-width:500px;
33+
margin:50px auto;
34+
background:white;
35+
border-radius:5px;
36+
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
37+
padding:1rem 2rem 1rem 5rem;
38+
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
39+
background-size: 100% 3rem;
40+
position: relative;
41+
line-height:3rem;
42+
}
43+
p {
44+
margin: 0 0 3rem;
45+
}
46+
47+
.words:before {
48+
content: '';
49+
position: absolute;
50+
width: 4px;
51+
top: 0;
52+
left: 30px;
53+
bottom: 0;
54+
border: 1px solid;
55+
border-color: transparent #efe4e4;
56+
}
57+
</style>
58+
59+
</body>
60+
</html>

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ No | Guide | Demo
5858
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)
5959
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)
6060
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)
61-
19 | Webcam Fun | -
61+
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)
6262
20 | Speech Detection | -
6363
21 | Geolocation | -
6464
22 | Follow Along Link Highlighter | -
@@ -80,7 +80,7 @@ Name | Contribution
8080
[@DrakeXiang](https://github.com/DrakeXiang) | No.[11](https://github.com/soyaine/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player)
8181
[@zzh466](http://github.com/zzh466) | Review
8282
[@Xing Liu](https://github.com/S1ngS1ng) | Review
83-
[@大史快跑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)
83+
[@大史快跑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)
8484
[@缉熙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)
8585

8686
## JOIN US

0 commit comments

Comments
 (0)