if ("webkitSpeechRecognition" in window) 
// Speech Recognition Stuff goes here
 else 
console.log("Speech Recognition Not Available")

From now on, everything we write will contain if Statement.

let's create an object for it webkitSpeechRecognition,

let speechRecognition = new webkitSpeechRecognition();

Let's adjust some settings for this speechRecognition Now object.

Depending on when the user stops speaking, the voice recognition object may either stop listening or continue listening until the user tells it to stop. you can set it false If you want to recognize a word or phrase. set it true for this article.

speechRecognition.continuous = true;

The results which are still preliminary are known as interim results. If you enable this option, speechRecognition The object will return both the final result and the interim result. let's change that true,

speechRecognition.interimResults = true;

The user will communicate using this language. To set this property, the locale code must be used. Please be aware that this function does not currently support all languages.

Sets the user's selected language from the select menu. The language attribute must be set to a value from the dialect selection menu.

speechRecognition.lang = document.querySelector("#select_dialect").value;

for events like onStart, onEnd, onResultAnd onErrorYou can provide callback.

onstart

This event is triggered when the user initiates speech recognition. Send a callback function to the webpage to show that the voice recognition frequency is listening.

In starter code, there is a

id element status He says Listening..., This element is currently hidden using CSS.

let's set it display: block When speech recognition starts.

speechRecognition.onstart = () => 
document.querySelector("#status").style.display = "block";
;

In the end

This event is set when the user turns off speech recognition. Let's pass a callback function that will hide the status of the webpage

Element.

let's set it display: none When speech recognition starts.

speechRecognition.onend = () => 
document.querySelector("#status").style.display = "none";
;

onError

This event is triggered when any type of speech recognition error occurs. Let's pass a callback function that will hide the status of the webpage

Element.

let's set it display: none When speech recognition starts.

speechRecognition.onError = () => 
document.querySelector("#status").style.display = "none";
;

onResult

when speechRecognition There are some results from the recognition of the object, this event is closed. Both final and interim findings will be included. passing a callback method that sets the result to appropriate Inside the transcript box will be helpful.

This is the HTML code for the transcript box of the website.

To be determined for the interim and final result span with id interim And finalrespectively.

callback function will get a event The object from the result event. The results will be stored in this object as an array. It would be possible to determine whether each entry in the array is a final result or an interim result by looking at isFinal Property.

Declare a variable for the interim transcript inside the callback method and one for the final transcript outside it.

let final_transcript = "";
speechRecognition.onresult = (event) => 
// Create the interim transcript string locally because we don't want it to persist like final transcript
let interim_transcript = "";
;

Let us now create a string using the result array. If the result item is the last one, we should loop through the process and add it to the final transcript. If not, then we should include it in the series of preliminary results.

// Loop through the results from the speech recognition object.
for (let i = event.resultIndex; i < event.results.length; ++i) 
// If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
if (event.results[i].isFinal) 
final_transcript += event.results[i][0].transcript;
 else 
interim_transcript += event.results[i][0].transcript;

Let's finally add the transcript data to the DOM.

document.querySelector("#final").innerHTML = final_transcript;
document.querySelector("#interim").innerHTML = interim_transcript;

Now, here is the complete code for onResult Competition:

let final_transcript = "";
speechRecognition.onresult = (event) => 
// Create the interim transcript string locally because we don't want it to persist like final transcript
let interim_transcript = "";
// Loop through the results from the speech recognition object.
for (let i = event.resultIndex; i < event.results.length; ++i) 
// If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
if (event.results[i].isFinal) 
final_transcript += event.results[i][0].transcript;
 else 
interim_transcript += event.results[i][0].transcript;

// Set the Final franscript and Interim transcript.
document.querySelector("#final").innerHTML = final_transcript;
document.querySelector("#interim").innerHTML = interim_transcript;
;

Let's finally start and end the validation.

To start and stop voice recognition, we need to set onClick Start and Stop button properties.

document.querySelector("#start").onclick = () => 
speechRecognition.start();
;
document.querySelector("#stop").onclick = () => 
speechRecognition.stop();
;

here is complete speechRecognition.js file:

if ("webkitSpeechRecognition" in window) 
// Initialize webkitSpeechRecognition
let speechRecognition = new webkitSpeechRecognition();
// String for the Final Transcript
let final_transcript = "";
// Set the properties for the Speech Recognition object
speechRecognition.continuous = true;
speechRecognition.interimResults = true;
speechRecognition.lang = document.querySelector("#select_dialect").value;
// Callback Function for the onStart Event
speechRecognition.onstart = () => 
// Show the Status Element
document.querySelector("#status").style.display = "block";
;
speechRecognition.onerror = () => 
// Hide the Status Element
document.querySelector("#status").style.display = "none";
;
speechRecognition.onend = () => 
// Hide the Status Element
document.querySelector("#status").style.display = "none";
;
speechRecognition.onresult = (event) => 
// Create the interim transcript string locally because we don't want it to persist like final transcript
let interim_transcript = "";
// Loop through the results from the speech recognition object.
for (let i = event.resultIndex; i < event.results.length; ++i) 
// If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
if (event.results[i].isFinal) 
final_transcript += event.results[i][0].transcript;
 else 
interim_transcript += event.results[i][0].transcript;

// Set the Final transcript and Interim transcript.
document.querySelector("#final").innerHTML = final_transcript;
document.querySelector("#interim").innerHTML = interim_transcript;
;
// Set the onClick property of the start button
document.querySelector("#start").onclick = () => 
// Start the Speech Recognition
speechRecognition.start();
;
// Set the onClick property of the stop button
document.querySelector("#stop").onclick = () => 
// Stop the Speech Recognition
speechRecognition.stop();
;
 else 
console.log("Speech Recognition Not Available");

now, open index.html File in your favorite web browser to view the final output. It will ask you to access your system's microphone. press Allow For this. then click Start button and speak. You will see that it recognizes your voice and shows you the exact words you speak.

Congratulations! You learned something new today.