-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Expand file tree
/
Copy pathscript.js
More file actions
98 lines (89 loc) · 2 KB
/
script.js
File metadata and controls
98 lines (89 loc) · 2 KB
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
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechRecognitionEvent =
SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
var colors = [
"aqua",
"azure",
"beige",
"bisque",
"black",
"blue",
"brown",
"chocolate",
"coral",
"crimson",
"cyan",
"fuchsia",
"ghostwhite",
"gold",
"goldenrod",
"gray",
"green",
"indigo",
"ivory",
"khaki",
"lavender",
"lime",
"linen",
"magenta",
"maroon",
"moccasin",
"navy",
"olive",
"orange",
"orchid",
"peru",
"pink",
"plum",
"purple",
"red",
"salmon",
"sienna",
"silver",
"snow",
"tan",
"teal",
"thistle",
"tomato",
"turquoise",
"violet",
"white",
"yellow",
];
const recognition = new SpeechRecognition();
recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;
const diagnostic = document.querySelector(".output");
const bg = document.querySelector("html");
const hints = document.querySelector(".hints");
const startBtn = document.querySelector("button");
let colorHTML = "";
colors.forEach(function (v, i, a) {
console.log(v, i);
colorHTML += '<span style="background-color:' + v + ';"> ' + v + " </span>";
});
hints.innerHTML =
"Press the button then say a color to change the background color of the app. Try " +
colorHTML +
".";
startBtn.onclick = function () {
recognition.start();
console.log("Ready to receive a color command.");
};
recognition.onresult = function (event) {
const color = event.results[0][0].transcript;
diagnostic.textContent = "Result received: " + color + ".";
bg.style.backgroundColor = color;
console.log("Confidence: " + event.results[0][0].confidence);
};
recognition.onspeechend = function () {
recognition.stop();
};
recognition.onnomatch = function (event) {
diagnostic.textContent = "I didn't recognise that color.";
};
recognition.onerror = function (event) {
diagnostic.textContent = "Error occurred in recognition: " + event.error;
};