Speech recognition: let’s talk about

Now with javascript you can do anything previously allowed only by heavy and complex desktop applications, let’s talk about speech recognition. A crazy example of one of these features is the ability of the browser to listen to us and understand what we are saying (with the due limits of the AI appointed for this purpose).
In terms of code, everything translates into the initialization of the javascript heart object (SpeechRecognition) and its management to react to the various states.

Let’s start with the html elements needed to interact with the functionality. In this case, we’ll keep it simple so we get straight to the point. These elements will have the necessary ids to be called via javascript.

  <button id="recognize" class="btn btn-primary">Recognize me</button>
  <p id="recognized"></p>

At this point in a javascript called from the page we begin to define the functionality.
We do this by initializing the window.SpeechRecognition object (or its variant window.webkitSpeechRecognition, in case there isn’t the former).

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognize = new SpeechRecognition();

Use speech recognition

With the object of the functionality in hand, we are going to define the reaction we would like to take place after the recording of the voice is finished.
In this case we just need to print the text that will be recognized on the screen. This can be done by defining an anonymous function on the onresult property of the SpeechRecognition. This property will be called when returning a result from the AI ​​listening to our recording.

const recognizeBtn = document.getElementById('recognize'); // Input button
const recognized = document.getElementById('recognized'); // Output text

recognize.onresult = event => {
  const current = event.resultIndex;
  const result = event.results[current][0].transcript;
  recognized.textContent = result;
  console.log('result:', result);
};

To conclude, we must assign to the button the activation of the listening function. This we can do with a listener on it.

const recognizeBtn = document.getElementById('recognize'); // Input button
recognizeBtn.addEventListener('click', () => {
  recognize.start(); // Starting function for SpeechRecognition.
});

Other functions

In addition we can also define other functions on other registration states, for example at the start or at the end.

recognize.onstart = () => {
  console.log('Recording...');
};

recognize.onspeechend = () => {
  console.log('...stop recording.');
};

If you speak another language you can add configuration to the speech recognition with some useful properties.

recognize.lang = 'en-US';

An example

Here is an easy example below and a nicer example below.
For the complete list of available features, you can refer to this link.

That’s all.
Try it at home!