Speak guessing number game with Javascript

 

course from Brad Traversy

Github code

Feature:

SpeechRecongnition Web API

HTML

msg is the container to show the user speaking content and also a selected message

CSS

style the play-again button

the box is for the detective content speaking 

JS

select the element of the message box

First, generate the random number to be the right answer

Math.random() to generate a number between 0-1 

format the number with Math.floor() to get a number between 1-100

Using Web Speech Recognition API, which is not good for all browsers. 

If you do have Firefox browser, make sure the function is true.

Firefox 

search "about:config" ,enable to change

search "speech", "media.web speech.recognition.force_enable" and "media.web speech.recognition" to true

Make sure Chrome supported: MDN

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition

Speech Recognition API Document

SpeechRecognition.start()

Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.

result

Fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
Also available via the onresult property.

when there is a result, run the function onSpeak to capture the content

get the message transcript from the event 

when speaking"hello" to mic, console log "e"

then write the message to the DOM and check the number

write the speaking transcript to the box

if the speaking content is not the number, the message is "not the number"

if the number is not in 1-100, show the message reminder

if the speaking number is the same as the right number, show the congrats message and a play again button

if the number is too large or small, show the message 

When the recognition is ended, start again. so can keep trying 

when clicking the play again button, reload the window