Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 01ed4bc

Browse files
authored
Merge pull request soyaine#25 from dashrun/master
Practice 20
2 parents e0a0c0f + c9f3a0b commit 01ed4bc

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[フレーム]
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>
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)

AltStyle によって変換されたページ (->オリジナル) /