# Babylon Color3 Speech Recognition Game

**URL:** <https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938>\
**Category:** Demos and projects\
**Created:** [November 1, 2021, 4:52am UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938 "2021-11-01T04:52:25Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 1, 2021, 4:52am UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/1 "2021-11-01T04:52:25Z")

</div>

Small game based on Web Speech API.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/1/f108b1b82db428a0a4b928de6567e91affafc911.jpeg)

Press START and pronounce one of the Babylon Color3 Names - maybe it will be recognized.  
Click a ball to know its color if you are not sure.

(I definitely improved my pronunciation while developing and now usually finish with around 20 attempts) 🙂

> **[Color Speech Recognition Game - BabylonPress](https://babylonpress.org/3d-blog/3d-demo/color-speech-recognition-game/)**
>
> Est. reading time: 1 minute

(Tested and works in Chrome. Source code included).

---

<div class="post-metadata">

**Author:** ![flo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/flo/32/26919_2.png) [@flo](https://forum.babylonjs.com/u/flo)\
**Post date:** [November 1, 2021, 10:55am UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/2 "2021-11-01T10:55:55Z")

</div>

nice!..  
I had to laugh because of my poor pronounciation the software couldn’t find the RAT, or RHETT color -  
‘yellow’ worked fine 😁

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 1, 2021, 12:07pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/3 "2021-11-01T12:07:45Z")

</div>

RED was also difficult for me 🙂  
By the way, one can cheat with Google Translate speaking a color at other tab or at smartphone.

Below there is extremely funny videoclip about voice recognition problems 🙂

[![](https://img.youtube.com/vi/nwPtcqcqz00/maxresdefault.jpg "SMART HOUSE – ENGLISH VERSION – REMA 1000") ](https://www.youtube.com/watch?v=nwPtcqcqz00)

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [November 1, 2021, 7:48pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/4 "2021-11-01T19:48:49Z")

</div>

Love it! I like games with unconventional input systems! As a native English speaker, I still had some trouble getting it to recognize “teal” 😛

Also, sometimes it detects “Magenta.” instead of “Magenta” and doesn’t match to a color. Maybe strip out punctuation when you do the comparison?

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 1, 2021, 9:30pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/5 "2021-11-01T21:30:31Z")

</div>

Thank you for the feedback! Strip function added.  
RED and TEAL are the most difficult colors at the moment 🙂  
By the way, it is possible to change the language from `en-US` to `en-UK` - somewhere around the line 246 at [https://playground.babylonjs.com/#11BXS0#70](https://playground.babylonjs.com/#11BXS0#70)

` recognition.lang = 'en-US';`  
change to  
` recognition.lang = 'en-UK';`

Let me know if it will help you with the British teal color 🙂

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [November 3, 2021, 4:23pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/6 "2021-11-03T16:23:37Z")

</div>

Worked on Edge. Failed on Firefox. This was in the Firefox console:

```auto
Babylon.js viewer (v4.2.0) babylon.viewer.js:3852:111462
JQMIGRATE: Migrate is installed, version 3.3.2 jquery-migrate.min.js:2:709
Uncaught ReferenceError: webkitSpeechRecognition is not defined
    babylonpressCMB_WRAP_1119 https://babylonpress.org/3d-blog/3d-demo/color-speech-recognition-game/:284
    <anonymous> https://babylonpress.org/3d-blog/3d-demo/color-speech-recognition-game/:869
color-speech-recognition-game:284:25

The resource at “https://mc.yandex.ru/metrika/tag.js” was blocked because content blocking is enabled.

color-speech-recognition-game
Uncaught TypeError: engine is null
    babylonpressCMB_WRAP_1119 https://babylonpress.org/3d-blog/3d-demo/color-speech-recognition-game/:280
color-speech-recognition-game:280:13

```

Perhaps, you might trap one of these, and call `alert('Speech recognition not supported by this browser`);`

Do not know what yandex is. Thinking it is a search engine.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 3, 2021, 5:24pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/7 "2021-11-03T17:24:01Z")

</div>

Thanks for testing! I added alert for Firefox and Opera - [https://playground.babylonjs.com/#11BXS0#72](https://playground.babylonjs.com/#11BXS0#72)  
Here is the list of supported browsers - [Speech Recognition API | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/speech-recognition)  
While Edge is marked as not fully supported, it is much easier for me to pass the game on Edge than on Chrome.

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [November 3, 2021, 6:04pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/8 "2021-11-03T18:04:05Z")

</div>

Sorry, I should have actually studied the error on firefox. As soon as I saw webkit, I knew what the problem was. Much like other things earlier, Firefox implements it the correct way, it is the others which use webkit for pre-standard stuff.

> **[SpeechRecognition - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)**
>
> The SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service; this also handles the SpeechRecognitionEvent sent from the recognition service.

You probably want to get an initial reference like:

```auto
let speechRecogition = SpeechRecognition | webkitSpeechRecognition;

```

What has happened before is eventually chrome drops the webkit.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 3, 2021, 6:07pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/9 "2021-11-03T18:07:52Z")

</div>

This line is there (line 12)  
`var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition`  
Actually the recognition code in [Playground](https://playground.babylonjs.com/#11BXS0#72) is taken from MDN example. Still it doesn’t work in FF 🙂

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [November 3, 2021, 7:16pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/10 "2021-11-03T19:16:37Z")

</div>

Looks like it has to be enabled to work in some cases. If you type about:config in the address bar, search for speech, and double click media.webspeech.recognition.enable, then it’s working for me in FF on my MacBook, for example. It looks like they’ve dropped the prefixes too. 🙂

There’s a little more info about it in the Browser support section here: [Using the Web Speech API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API#browser_support_2)

Edit, actually it only seems to work for me if I change both media.webspeech.recognition.enable AND media.webspeech.recognition.force\_enable to true… 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 3, 2021, 7:28pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/11 "2021-11-03T19:28:23Z")

</div>

With media.webspeech.recognition parameter enabled FF loaded the page for me too.  
Still didn’t get any success with recognition - FF doesn’t understand me, in contrast with Chrome and Edge.

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [November 3, 2021, 8:54pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/13 "2021-11-03T20:54:06Z")

</div>

Drat, my pronunciation is horrible/distinct so speech recognition usually doesn’t work well for me LOL, so I can’t really try it out. 🙂 🍻

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [November 5, 2021, 3:56pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/14 "2021-11-05T15:56:39Z")

</div>

@labris this is very cool!

Any objection to me adding it to the community page and tweeting about it?

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 5, 2021, 5:54pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/15 "2021-11-05T17:54:09Z")

</div>

Sure, I would be glad to see it at the community page 🙂

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [November 5, 2021, 8:00pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/16 "2021-11-05T20:00:51Z")

</div>

What’s your username on twitter?

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 5, 2021, 8:30pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/17 "2021-11-05T20:30:33Z")

</div>

I still don’t have Twitter 🙂

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [November 5, 2021, 8:51pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/18 "2021-11-05T20:51:26Z")

</div>

Sweet no problem!

This will be live on the community page shortly!

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 6, 2021, 7:52am UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/19 "2021-11-06T07:52:02Z")

</div>

Thanks!  
There is something magical in voice commands 🙂  
Here is another example: **Control Animations with Voice**  
PG - [https://playground.babylonjs.com/#Z8Q0LC#3](https://playground.babylonjs.com/#Z8Q0LC#3)

 ![Screenshot 2021-11-06 at 10.46.55](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/5/f5fec853bd01e60632e5d3d0fd6c0dae940a144f.jpeg)

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [November 15, 2021, 6:22pm UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/20 "2021-11-15T18:22:37Z")

</div>

I just tried something by loading the recognition “game” in the browser of an Oculus Quest 2. It errors. 😭, I got no alert, but did double check the console using Chrome remote debugging found  
`webkitSpeechRecognition is not defined`

That is really is unfortunate, because you could make editable text fields with a label and a button next to it with a microphone icon on it. Click / touch the button, say something, then the field gets filled with what you said. No keyboard required.

Web searching said something about `chrome://flags`, but it was in the context of VR and rift (kind of old). Once on the flags page of the device, `speech` in the search field got no hits.

This really should something which is core for a XR device-based browser. @RaananW , you don’t have any insight, do you? Calling you out specifically, since I could see you thinking that this thread was not in your “domain”.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 16, 2021, 10:29am UTC](https://forum.babylonjs.com/t/babylon-color3-speech-recognition-game/24938/21 "2021-11-16T10:29:32Z")

</div>

> [@JCPalmer](#):
>
> I got no alert, but did double check the console using Chrome remote debugging found  
> `webkitSpeechRecognition is not defined`

That means the oculus browser doesn’t have it implemented (and it is therefore not supported). I’ll check to make sure and get back to you 🙂