What is Web-Speech recognition in JavaScript | Code Web-Speech recognition in JavaScript

Web-Speech recognition in JavaScript

Introduction:

JavaScript provides us with methods to enable speech recognition with Web Speech API. This API acts as a controller in the interface for the recognition service, along with an event handler called SpeechRecognition which fires the event.

Prerequisite:

A common understanding of the usage of array and transforming from an array of string to string. Forming a constructor. There should be a proper grip over firing events with event listeners and also knowledge over accessing prototypes with a pre-defined set of rules.

Methods:

Declare global variable SpeechRecognition for the window. This resides in the browser. To make it accessible in chrome also, there is another variable known as webkitSpeechRecognition. Declare all of them to a variable and then call it as a constructor of new later on.

Example:

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

There are several properties and methods for the SpeechRecognition, they are used as per the need. Some of the commonly used are

• In properties

SpeechRecognition.lang : used for defining or altering the language from the default HTML one, for the return value from the SpeechRecognition

SpeechRecognition.continuos: used for changing the continuity of SpeechRecognition (false by default) after getting a single result

• In Methods

SpeechRecognition.start(): used to start the function from listening to the incoming audio.

SpeechRecognition.stop(): used to stop the function from listening to the incoming audio.

• In Events

end: The event used to perform an action after completion of some other event.

result: The event which starts when SpeechRecognition receives some result. A word or phrase can be positively recognized.

After declaring the constructor, define or add an event listener of result with a function defined in it. The function will constitute various methodologies to fetch data from the prototype and convert series of arrays and array of strings to an only string that can be populated on the console.

Example:

  const hello = Array.from(e.results).map((result) => result[0].transcript);

To fire this event, use the start method for the constant of the constructor for SpeechRecognition.

This can be observed that when the result event fetches some input from the speech of the user, after the first input it stops automatically. To keep the SpeechRecgnition running add another event listener of end to perform a task when the previous event ends. Define it with function in it which will eventually call the start function again inside this event.

Example:

recognition.addEventListener("end",recognition.start);

Code:

NOTE: Make sure to run this on a live server to see the results.

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.lang = "en-US";
let finalDirection;
	

recognition.addEventListener("result", (e) => {
  const hello = Array.from(e.results).map((result) => result[0].transcript);
  finalDirection = hello[0];
  console.log(finalDirection);
});



recognition.addEventListener("end", (e) => {

  if (finalDirection === "done") {
    recognition.stop();

  } else {
    recognition.start();

  }

});




recognition.start();

Output:

Turn on the microphone to use this.

Code for this will be in the GitHub Repository 

To get some more information regarding the methods, events, and properties of SpeechRecognition visit MDN WEB DOCS