Voice Recognition Lab

On a 600x600 pixel canvas draw an arc (circle) in the very center of the canvas with a radius of 25 and the fillStyle of black. When the user enters in a diameter value adjust that for the radius value used in the program.

Offer the users:
Have a button with that with the value of "Speak". When the user clicks on that button the value changes to "Stop"

Have your program respond to the following words or phrases:

Have on the screen instructions that list the following, but write so it looks like instructions for a user:

Say "color _____" to change the color of the circle. For example "color blue" to make the circle blue.
Say "size _____" to change the size of the circle. For example "size 50" to make the circle with a diameter of 50.
- If someone says something larger than 300 (or whatever looks too big on the screen) speak back "Size size limit 300".
- If someone says something smaller than 1, say "Size too small, the minimize size is 1".
- String to Int: https://www.w3schools.com/jsref/jsref_parseint.asp
  Test the value for NaN to see if the value is valid for the size.
Say "Help" to tell them "Say color, followed by a color, to set the circle color. Say size, followed of a number from 1 to 300, to set the diameter of the circle."

Use variables to hold the color and size values, so you can set them separately from the drawing function.

If they ask for an invalid color, JavaScript ends up not changing the color and uses the previous fillStyle. You can always set the fillStyle first to "Black" and then set it to the value that the user speaks. This way if they speak an invalid color, the circle still appears in Black.

When the user presses the Speak button, have the program listen and stop when the user stops speaking (which is automatic) or if they press "Stop".

When the user stops speaking, or pressed "Stop", change the button's value to "Speak" so that the user can speak again.

SpeechRecognition.abort(): Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a SpeechRecognitionResult.
SpeechRecognition.start(): Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
SpeechRecognition.stop(): Stops the speech recognition service from listening to incoming audio, and attempts to return a SpeechRecognitionResult using the audio captured so far.

https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onresult

Set continuous to be false, but start the recognition again, if you want to keep listening for more commands. Otherwise try the continuous feature, but I found it easier to start the recognition after it stopped.

Helpful Links:

https://shapeshed.com/html5-speech-recognition-api/
http://stephenwalther.com/archive/2015/01/05/using-html5-speech-recognition-and-text-to-speech
https://dvcs.w3.org/hg/speech-api/raw-file/9a0075d25326/speechapi.html
https://stiltsoft.com/blog/2013/05/google-chrome-how-to-use-the-web-speech-api/
https://davidwalsh.name/speech-recognition