This demo works in Chrome 142+ on desktop and equivalent Chromiums.
+ + + + + +...diagnostic messages
+ + diff --git a/web-speech-api/on-device-speech-color-changer/script.js b/web-speech-api/on-device-speech-color-changer/script.js new file mode 100644 index 00000000..b1bbccce --- /dev/null +++ b/web-speech-api/on-device-speech-color-changer/script.js @@ -0,0 +1,131 @@ +const colors = [ + "aqua", + "azure", + "bisque", + "blue", + "brown", + "chocolate", + "coral", + "cornflowerblue", + "crimson", + "cyan", + "deepskyblue", + "fuchsia", + "ghostwhite", + "gold", + "goldenrod", + "gray", + "green", + "greenyellow", + "hotpink", + "indigo", + "ivory", + "khaki", + "lavender", + "lightseagreen", + "lime", + "linen", + "magenta", + "maroon", + "moccasin", + "navy", + "olive", + "orange", + "orchid", + "peru", + "pink", + "plum", + "purple", + "rebeccapurple", + "red", + "salmon", + "sienna", + "silver", + "snow", + "steelblue", + "tan", + "teal", + "thistle", + "tomato", + "turquoise", + "violet", + "yellow", +]; + +const phraseData = [ + { phrase: "azure", boost: 10.0 }, + { phrase: "khaki", boost: 3.0 }, + { phrase: "tan", boost: 2.0 }, +]; + +const phraseObjects = phraseData.map( + (p) => new SpeechRecognitionPhrase(p.phrase, p.boost) +); + +const recognition = new SpeechRecognition(); +recognition.continuous = false; +recognition.lang = "en-US"; +recognition.interimResults = false; +recognition.processLocally = true; +recognition.phrases = phraseObjects; + +recognition.phrases.push(new SpeechRecognitionPhrase("thistle", 5.0)); + +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 += `${v} `; +}); +hints.innerHTML = `Press the button then say a color to change the background color of the app. For example, you could try ${colorHTML}`; + +startBtn.addEventListener("click", () => { + // check availability of target language + SpeechRecognition.available({ langs: ["en-US"], processLocally: true }).then( + (result) => { + if (result === "unavailable") { + diagnostic.textContent = `en-US not available to download at this time. Sorry!`; + } else if (result === "available") { + recognition.start(); + console.log("Ready to receive a color command."); + } else { + diagnostic.textContent = `en-US language pack downloading`; + SpeechRecognition.install({ + langs: ["en-US"], + processLocally: true, + }).then((result) => { + if (result) { + diagnostic.textContent = `en-US language pack downloaded. Try again.`; + } else { + diagnostic.textContent = `en-US language pack failed to download. Try again later.`; + } + }); + } + } + ); +}); + +recognition.addEventListener("result", (event) => { + let color = event.results[0][0].transcript; + // Remove whitespace from recognized speech + color = color.replace(/\s+/g, ""); + diagnostic.textContent = `Result received: ${color}.`; + bg.style.backgroundColor = color; + console.log(`Confidence: ${event.results[0][0].confidence}`); +}); + +recognition.addEventListener("speechend", () => { + recognition.stop(); +}); + +recognition.addEventListener("nomatch", (event) => { + diagnostic.textContent = "I didn't recognise that color."; +}); + +recognition.addEventListener("error", (event) => { + diagnostic.textContent = `Error occurred in recognition: ${event.error}`; +}); diff --git a/web-speech-api/on-device-speech-color-changer/style.css b/web-speech-api/on-device-speech-color-changer/style.css new file mode 100644 index 00000000..bdac962a --- /dev/null +++ b/web-speech-api/on-device-speech-color-changer/style.css @@ -0,0 +1,39 @@ +body, +html { + margin: 0; +} + +html { + height: 100%; +} + +body { + height: inherit; + overflow: hidden; + max-width: 800px; + margin: 0 auto; + font-family: system-ui; + text-align: center; +} + +.output { + height: 100px; + margin: 0; + overflow: auto; + position: absolute; + bottom: 0; + right: 0; + left: 0; + background-color: rgba(255 255 255 / 0.2); + display: flex; + justify-content: center; + align-items: center; +} + +ul { + margin: 0; +} + +.hints span { + text-shadow: 0px 0px 6px rgba(255 255 255 / 0.7); +} diff --git a/web-speech-api/speech-color-changer/index.html b/web-speech-api/speech-color-changer/index.html index 781ef505..fd55c3fd 100644 --- a/web-speech-api/speech-color-changer/index.html +++ b/web-speech-api/speech-color-changer/index.html @@ -14,9 +14,10 @@...diagnostic messages
-...diagnostic messages