-
Notifications
You must be signed in to change notification settings - Fork 0
/
standalone-speech-demo.html
113 lines (101 loc) · 3.56 KB
/
standalone-speech-demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Speech Detection control of tv show dom project</title>
</head>
<body>
<div class="words" contenteditable></div>
<script>
function registerSpeechRecognitionListener(processPhraseCallback) {
//based on code demoed at this wes bos talk
//https://www.youtube.com/watch?v=pws4qzGn5ak
//Create the speech recognition object
window.SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = "en-GB";
let p = document.createElement("p");
const words = document.querySelector(".words");
words.appendChild(p);
recognition.addEventListener("result", (e) => {
const transcript = Array.from(e.results)
.map((result) => result[0]) //just the highest confidence guess
.map((result) => result.transcript)
.join("");
p.textContent = transcript;
if (e.results[0].isFinal) {
processPhraseCallback(transcript);
//when exactly is isFinal set?
}
});
//only if we want to keep going after first phrase end is detected
recognition.addEventListener("end", recognition.start);
recognition.start();
}
registerSpeechRecognitionListener(processCommand);
console.log("started recognition tool");
const commands = [
{
title: "show all episodes",
regex: /show all episodes/gi,
fn: (matches) =>
//show all episodes (remove any filter)
console.log("Would show all episodes"),
},
{
title: "Show season _ episode _",
regex: /season (\d+) episode (\d+)/gi,
fn: (matches) =>
//DO an episode change
console.log(`present episode S${matches[1]}E${matches[2]}`),
},
{
title: "Show season _",
regex: /show season (\d+)/gi,
fn: (matches) =>
//DO a filtering of episodes
console.log("present all episodes in season number: " + matches[1]),
},
{
title: "...episodes containing _",
regex: /show episodes containing (.*)/gi,
fn: (matches) =>
//DO a search
console.log("search episodes for keyword: " + matches[1]),
},
{
title: "What can i say?",
regex: /what can i say/gi,
//display help dialog of what can be said
fn: (matches) =>
console.log(
"You can say: \n",
commands.map((c) => c.title).join("\n")
),
},
];
function processCommand(transcript) {
let el = document.body.appendChild(document.createElement("div"));
el.innerText = "processing cmd: " + transcript;
const matchedCmd = commands.find(
(cmd) => [...transcript.matchAll(cmd.regex)].length > 0
);
if (matchedCmd) {
let matches = [...transcript.matchAll(matchedCmd.regex)];
if (matches.length > 0) {
console.log("got a match. matches are: ", matches[0]);
console.log(matchedCmd.fn(matches[0]));
} else {
console.error(
"cmd was selected but then doesn't match. suspect code error."
);
}
} else {
("no command matches that");
}
}
</script>
</body>
</html>