Babylon Color3 Speech Recognition Game

Small game based on Web Speech API.

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) :slight_smile:

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

7 Likes

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

RED was also difficult for me :slight_smile:
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 :slight_smile:

3 Likes

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

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

Thank you for the feedback! Strip function added.
RED and TEAL are the most difficult colors at the moment :slight_smile:
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

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

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

2 Likes

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

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.

1 Like

Thanks for testing! I added alert for Firefox and Opera - 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
While Edge is marked as not fully supported, it is much easier for me to pass the game on Edge than on Chrome.

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.

You probably want to get an initial reference like:

let speechRecogition = SpeechRecognition |  webkitSpeechRecognition;

What has happened before is eventually chrome drops the webkit.

1 Like

This line is there (line 12)
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
Actually the recognition code in Playground is taken from MDN example. Still it doesn’t work in FF :slight_smile:

2 Likes

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. :slightly_smiling_face:

There’s a little more info about it in the Browser support section here: Using the Web Speech API - Web APIs | MDN

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… :man_shrugging:

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.

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. :slightly_smiling_face: :beers:

@labris this is very cool!

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

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

What’s your username on twitter?

I still don’t have Twitter :slight_smile:

Sweet no problem!

This will be live on the community page shortly!

1 Like

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

2 Likes

I just tried something by loading the recognition “game” in the browser of an Oculus Quest 2. It errors. :sob:, 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”.

2 Likes

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 :slight_smile:

2 Likes