Visitar URL original
feat: speech recognition · tiago-m-dias/JavaScript30@88092f3 · GitHub
Skip to content

Commit 88092f3

Browse files
tiago-m-diastiago-m-dias
committed
feat: speech recognition
Challenge wesbos#20
1 parent 1117c78 commit 88092f3

2 files changed

Lines changed: 4095 additions & 53 deletions

File tree

‎20 - Speech Detection/index-START.html‎

Lines changed: 86 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,94 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>Speech Detection</title>
5+
<meta charset="UTF-8">
6+
<title>Speech Detection</title>
67
</head>
8+
79
<body>
810

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-
44-
p {
45-
margin: 0 0 3rem;
46-
}
47-
48-
.words:before {
49-
content: '';
50-
position: absolute;
51-
width: 4px;
52-
top: 0;
53-
left: 30px;
54-
bottom: 0;
55-
border: 1px solid;
56-
border-color: transparent #efe4e4;
57-
}
58-
</style>
11+
<div class="words" contenteditable>
12+
</div>
13+
14+
<script>
15+
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
16+
17+
const recognition = new SpeechRecognition();
18+
recognition.lang = 'enUS';
19+
20+
recognition.interimResults = true;
21+
22+
let p = document.createElement('p');
23+
24+
const words = document.querySelector('.words');
25+
words.appendChild(p);
26+
27+
recognition.addEventListener('result', e => {
28+
// console.log(e.results);
29+
const transcript = Array.from(e.results)
30+
.map(result => result[0])
31+
.map(result => result.transcript).join('');
32+
33+
p.textContent = transcript;
34+
if (e.results[0].isFinal) {
35+
p = document.createElement('p');
36+
words.appendChild(p);
37+
}
38+
39+
if (transcript.includes('get the weather')) {
40+
console.log('GET DA WEDDAH!!');
41+
}
42+
console.log(transcript);
43+
});
44+
45+
recognition.addEventListener('end', recognition.start);
46+
47+
recognition.start();
48+
</script>
49+
50+
51+
<style>
52+
html {
53+
font-size: 10px;
54+
}
55+
56+
body {
57+
background: #ffc600;
58+
font-family: 'helvetica neue';
59+
font-weight: 200;
60+
font-size: 20px;
61+
}
62+
63+
.words {
64+
max-width: 500px;
65+
margin: 50px auto;
66+
background: white;
67+
border-radius: 5px;
68+
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
69+
padding: 1rem 2rem 1rem 5rem;
70+
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
71+
background-size: 100% 3rem;
72+
position: relative;
73+
line-height: 3rem;
74+
}
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>
5991

6092
</body>
61-
</html>
93+
94+
</html>

0 commit comments

Comments
 (0)