From 8df754fcf1b3178e1b51b97b30b67cb07a3ab8e1 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Fri, 12 Sep 2025 15:01:06 +0100 Subject: [PATCH 1/4] Add on-device speech recognition demo --- web-speech-api/README.md | 12 +- web-speech-api/index.html | 5 + .../on-device-speech-color-changer/index.html | 23 +++ .../on-device-speech-color-changer/script.js | 139 ++++++++++++++++++ .../on-device-speech-color-changer/style.css | 40 +++++ 5 files changed, 213 insertions(+), 6 deletions(-) create mode 100644 web-speech-api/on-device-speech-color-changer/index.html create mode 100644 web-speech-api/on-device-speech-color-changer/script.js create mode 100644 web-speech-api/on-device-speech-color-changer/style.css diff --git a/web-speech-api/README.md b/web-speech-api/README.md index b72a15dd..5df30aa5 100644 --- a/web-speech-api/README.md +++ b/web-speech-api/README.md @@ -8,16 +8,18 @@ Code for demos illustrating features of the Web Speech API. See [Web_Speech_API] [Run recognition demo live](https://mdn.github.io/dom-examples/web-speech-api/speech-color-changer/) -Tap the screen then say a colour — the grammar string contains a large number of HTML keywords to choose from, although we've removed most of the multiple word colors to remove ambiguity. We did keep goldenrod, cos, well. +Tap the screen then say a color — the grammar string contains a large number of HTML named color keywords to choose from. -This current works only on Chrome/Chrome Mobile. To get this code running successfully, you'll need to run the code through a web server (localhost will work.) +## On-device speech color changer demo + +[Run on-device recognition demo live](https://mdn.github.io/dom-examples/web-speech-api/on-device-speech-color-changer/) + +This version of the color changer demo uses the new on-device color changer functionality, which at the time of writing works in Chrome 139+ desktop only. ## Phrase matcher demo Speak the phrase and then see if the recognition engine successfully recognises it — this is another demo that relies on speech recognition, written for a research team at the University of Nebraska at Kearney. -This current works only on Chrome/Chrome Mobile. To get this code running successfully, you'll need to run the code through a web server (localhost will work.) - [Run phrase matcher demo live](https://mdn.github.io/dom-examples/web-speech-api/phrase-matcher/) ## Speak easy synthesis demo @@ -25,5 +27,3 @@ This current works only on Chrome/Chrome Mobile. To get this code running succes [Run synthesis demo live](https://mdn.github.io/dom-examples/web-speech-api/speak-easy-synthesis/) Type words in the input then submit the form to hear it spoken. You can also select the different voices available on the system, and alter the rate and pitch. - -This currently works in Chrome, Firefox and Safari. diff --git a/web-speech-api/index.html b/web-speech-api/index.html index b96dbd59..d3fc9063 100644 --- a/web-speech-api/index.html +++ b/web-speech-api/index.html @@ -20,6 +20,11 @@

Pick your test

  • Speech color changer
    • +
  • + On-device-speech color changer +

    • More information