HTML5 Voice Recognition Lab Speech will not work on your computer by opening up

Question

HTML5

Voice Recognition Lab

Speech will not work on your computer by opening up the file in your web browser. You will need to upload to a web server, or use NetBeans Connector for Chrome to view locally.

Use Chrome for this 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. With that known about the canvas properties, 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.

Explanation / Answer

     var recognizer = webkitSpeechRecognition(); //get new instance

  function recognize()
  {

recognize.start(); //start it

recognize.onend = function() { //a function to restart it when it stops

               recognize.start();

}

recognize.onresult = function(event) {

    var whatWasHeard = event.results[0][0].transcript; //get what was heard

    if (whatWasHeard.indexOf("change background color to") > -1) { //check for key phrase   

               document.body.style.backgroundColor = whatWasHeard.split("to ")[1]; //change color

    }

  //speechRecognization interface is the heart of recognization API
window.speechRecognition = window.speechRecognition ||window.webkitSpeechRecognition || window.mozSpeechRecognition ||window.webkitSpeechRecognition;

  if(window.speechRecognition == undefined)
  {
  alert("Speech Recogniztion API Not Supported");
  }
  else
  {
  //create a speechRecognization object
recognizer = new speechRecognition();

  //If set to "false" then recognizer stops listening automatically when user stops speaking the first sentence.
recognizer.continuous = true;

  //specify the language of speech. langauge must be in BCP 47 standard.
recognizer.lang = "en-US";

  //it set to true then onresult callback is fired after every word spoken by the user. Otherwise after end of sentence.
recognizer.interimResults = true;


  //fired when speech recognization starts listening.
recognizer.onstart = function(){
  alert("Recogniztion API started");
  }

  //fired everytime user stops speaking.
recognizer.onresult = function(event){  
  //event.resultIndex returns the index of first word spoken in the currently stoped sentence.
  //event.results.length is the total number of words spoken in this session.
  for(var count = event.resultIndex; count <event.results.length; count++)
  {
  //event.results array contains a array of word objects.
  //event.results[count][number], here 2D represents the most probable work for the spoken word.
  //event.result[count][number].transscript returns word string of the most probable word of the select word index.
document.getElementById("output").innerHTML += event.results[count][0].transcript;
  }
  }

  //fired when recognization is stopped manually or automatically.
recognizer.onend = function(){
recognizer = null;
  alert("Recogniztion API stopped");
  }

recognizer.start();
  }
  }

  function stop()
  {
  if(recognizer != null)
  {
  //stop it manually
recognizer.stop();
  alert("Recognization API stopped");
  }
  }

Related Questions

Navigate

• Browse (All)
• Browse H
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.