-
Notifications
You must be signed in to change notification settings - Fork 7
/
index2.html
125 lines (108 loc) · 3.49 KB
/
index2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hold 'Q' to begin speech recognition</title>
<style>
body {
font-family: monospace;
font-size: 22px;
background-color: whitesmoke;
-webkit-transition: background-color 400ms ease;
transition: background-color 400ms ease;
}
main {
background-color: rgba(255, 255, 255, 0.4);
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<main>
<span id="speech"></span>
<span id="interim"></span>
</main>
</body>
<script>
function upgrade() {
alert('Please upgrade to Google Chrome for best possible experience.');
}
window.onload = function() {
if (!(window.webkitSpeechRecognition) && !(window.speechRecognition)) {
upgrade();
} else {
var speech = new webkitSpeechRecognition() || speechRecognition();
speech.lang = 'en-US';
speech.continuous = true;
speech.interimResults = true;
var recognizing,
final_transcript,
interim_transcript,
transcription = document.getElementById('speech'),
interim_span = document.getElementById('interim');
interim_span.style.opacity = '0.5';
function reset() {
transcription.innerHTML = '';
interim_span.innerHTML = '';
recognizing = false;
}
document.onkeydown = function(e) {
if (e.key === "q") {
if (!recognizing) {
speech.start();
}
}
};
document.onkeyup = function(e) {
if (e.key === "q") {
if (recognizing) {
speech.stop();
reset();
}
}
};
speech.onstart = function() {
// When recognition begins
recognizing = true;
console.log("Speaking!");
};
speech.onresult = function(event) {
// When recognition produces result
interim_transcript = '';
final_transcript = '';
// main for loop for final and interim results
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
transcription.innerHTML = final_transcript;
interim_span.innerHTML = interim_transcript;
var makeArray = final_transcript.split(' ');
var bColor = makeArray.splice(-3);
// change background color
if ((/^change /g.test(final_transcript)) && (/background color/g.test(final_transcript))) {
if (bColor[0] === 'to') {
document.body.style.backgroundColor = bColor[1] + bColor[2];
} else if (bColor[1] === 'to') {
document.body.style.backgroundColor = bColor[2];
} else {
document.body.style.backgroundColor = bColor[0] + bColor[1] + bColor[2];
}
}
};
speech.onerror = function(event) {
// When recognition fails or error occurs
console.error(event.error);
};
speech.onend = function() {
// When recognition ends
console.log("Hold 'Q' to begin speech.");
reset();
};
}
};
</script>
</html>