Skip to content

Commit 285be4f

Browse files
ClJarvisClJarvis
committed
speech detection
1 parent b5b922c commit 285be4f

3 files changed

Lines changed: 189 additions & 0 deletions

File tree

‎20SpeechDetection/index-FINISHED.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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+
const recognition = new SpeechRecognition();
16+
recognition.interimResults = true;
17+
18+
let p = document.createElement('p');
19+
const words = document.querySelector('.words');
20+
words.appendChild(p);
21+
22+
recognition.addEventListener('result', e => {
23+
const transcript = Array.from(e.results)
24+
.map(result => result[0])
25+
.map(result => result.transcript)
26+
.join('');
27+
28+
const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
29+
p.textContent = poopScript;
30+
31+
if (e.results[0].isFinal) {
32+
p = document.createElement('p');
33+
words.appendChild(p);
34+
}
35+
});
36+
37+
recognition.addEventListener('end', recognition.start);
38+
39+
recognition.start();
40+
41+
</script>
42+
43+
44+
<style>
45+
html {
46+
font-size: 10px;
47+
}
48+
49+
body {
50+
background:#ffc600;
51+
font-family: 'helvetica neue';
52+
font-weight: 200;
53+
font-size: 20px;
54+
}
55+
56+
.words {
57+
max-width:500px;
58+
margin:50px auto;
59+
background:white;
60+
border-radius:5px;
61+
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
62+
padding:1rem 2rem 1rem 5rem;
63+
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
64+
background-size: 100% 3rem;
65+
position: relative;
66+
line-height:3rem;
67+
}
68+
p {
69+
margin: 0 0 3rem 0;
70+
}
71+
72+
.words:before {
73+
content: '';
74+
position: absolute;
75+
width: 4px;
76+
top: 0;
77+
left: 30px;
78+
bottom: 0;
79+
border: 1px solid;
80+
border-color: transparent #efe4e4;
81+
}
82+
</style>
83+
84+
</body>
85+
</html>

‎20SpeechDetection/index-START.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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+
const recognition = new SpeechRecognition();
17+
recognition.interimResults = true;
18+
19+
let p = document.createElement('p');
20+
const words = document.querySelector('.words');
21+
words.appendChild(p);
22+
23+
recognition.addEventListener('result', e => {
24+
// console.log(e.results);
25+
const transcript = Array.from(e.results)
26+
.map(result => result[0])
27+
.map(result => result.transcript)
28+
.join('')
29+
30+
p.textContent = transcript;
31+
if(e.results[0].isFinal) {
32+
p = document.createElement('p');
33+
words.appendChild(p);
34+
}
35+
36+
if(transcript.includes('get the weather')){
37+
console.log('unicorn')
38+
}
39+
console.log(transcript);
40+
41+
});
42+
43+
recognition.addEventListener('end', recognition.start);
44+
recognition.start();
45+
46+
</script>
47+
48+
49+
<style>
50+
html {
51+
font-size: 10px;
52+
}
53+
54+
body {
55+
background:#ffc600;
56+
font-family: 'helvetica neue';
57+
font-weight: 200;
58+
font-size: 20px;
59+
}
60+
61+
.words {
62+
max-width:500px;
63+
margin:50px auto;
64+
background:white;
65+
border-radius:5px;
66+
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
67+
padding:1rem 2rem 1rem 5rem;
68+
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
69+
background-size: 100% 3rem;
70+
position: relative;
71+
line-height:3rem;
72+
}
73+
p {
74+
margin: 0 0 3rem 0;
75+
}
76+
77+
.words:before {
78+
content: '';
79+
position: absolute;
80+
width: 4px;
81+
top: 0;
82+
left: 30px;
83+
bottom: 0;
84+
border: 1px solid;
85+
border-color: transparent #efe4e4;
86+
}
87+
</style>
88+
89+
</body>
90+
</html>

‎20SpeechDetection/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gum",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "scripts.js",
6+
"scripts": {
7+
"start" : "browser-sync start --directory --server --files '*.css, *.html, *.js'"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"browser-sync": "^2.12.5"
13+
}
14+
}

0 commit comments

Comments
 (0)