JavaScript speech recognition example

In this article, you will learn how to develop a speech recognition script using simple JavaScript code.

The reason for speech recognition is for a PC or machine to effectively recognise the words verbally expressed by anybody. With this technique, there is no compelling reason to focus on more personal details, for example, emphasize, cadence, and so forth. It provides lots of advantages in developing software. As, less than half the time it takes to recognise the word instead of typing it.

Speech recognition technologies for example, Alexa, Google Assistant, and Siri are changing the way people interact with their devices, homes, vehicles, and occupations. This technology allows us to converse with a PC or device that interprets what we're talking about to answer our inquiry or command. This technologies has moved rapidly from our cellphones to our homes.

This speech recognition technology can be used in many applications, like document creation, menu navigation systems, data entry, chat systems, and so on. The SpeechRecognition() constructor creates a new SpeechRecognition object instance. The SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service; this also handles the SpeechRecognitionEvent sent from the recognition service.

JavaScript SpeechRecognition()

Here is the code that demonstrates how we use the SpeechRecognition() object. This code recognises what the user says and converts it into text. Once the object is instantiated, we can use this to call event handlers. When we start speech recognition, the onstart() event handler can be utilized to advise the client that speech recognition has begun and they ought to talk into the microphone. To terminate the recognition process, the recognition.onspeechend() event handler is invoked. The recognition.start() method is used to start the speech recognition process, and recognition.stop() is used to stop the process.

The onresult event handler contains a result when the user has done the speaking. Here, we have fetched the transcript and confidence properties.

// instantiate speech recognition
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();
            
// call when the speech recognition service starts
recognition.onstart = function() {
    console.log("We are listening. Try speaking into the microphone.");
};

// when user is finished  speaking
recognition.onspeechend = function() {
    recognition.stop();
}
              
// This runs when the speech recognition service returns result
recognition.onresult = function(event) {
    var transcript = event.results[0][0].transcript;
    var confidence = event.results[0][0].confidence;
};

Complete Code: Javascript speech recognition

Here is the complete code to recognise speech using JavaScript code.

<!doctype html>
<html>
	<head>
		<title>JavaScript Speech Recognition</title>
		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.hide { display:none; }
			.show { display:block;}
		</style>
	</head>
	<body>
	<h2>JavaScript Speech Recognition</h2>
        <p>Click on the below button and then allow button and speak something...</p>
        <button class="btn btn-default" onclick="jsSpeechRecognition()">Speech Search</button>
	<p><span id="event"></span></p>
        <div id="result" class="hide"></div>
		<script>
		    function jsSpeechRecognition() {
		        // getting result
		        var result = document.getElementById("result");
		        // getting user action
		        var event = document.getElementById("event");
                // new speech recognition object
                var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
                var recognition = new SpeechRecognition();
            
                // This runs when the speech recognition service starts
                recognition.onstart = function() {
                    event.innerHTML = "Listening .....";
                };
                
                recognition.onspeechend = function() {
                    event.innerHTML = "stopped listening, hope you are done...";
                    recognition.stop();
                }
              
                // This runs when the speech recognition service returns result
                recognition.onresult = function(event) {
                    var transcript = event.results[0][0].transcript;
                    var confidence = event.results[0][0].confidence;
                    result.innerHTML = "<strong>Text:</strong> " + transcript + "<br/><strong>Confidence:</strong> "+ confidence*100+"%";
                    result.classList.remove("hide");
                };
              
                 // start speech recognition
                 recognition.start();
	        }
		</script>
	</body>
</html>

When we execute the above code in the browser, it shows up like this in the browser. It allows you to access your microphone to speak something.

Bootstrap datepicker example
Javascript window location
Generate random numbers in JavaScript
Remove duplicates from array Javascript
JavaScript speech recognition example
Submit a form data without page refresh using PHP, Ajax and JavaScript
Dynamically Add/Delete HTML Table Rows Using JavaScript
Getting Document of Remote Address
Get Visitor's location and TimeZone
Get current visitor's location using HTML5 Geolocation API and PHP
JavaScript display PDF in the browser using Ajax call
Print specific part of a web page in JavaScript
How to reverse a number in JavaScript
How to reverse string in JavaScript
Polling System using PHP, MySQL and Ajax
Remove duplicates from array JavaScript
Parsing JSON in JavaScript
Image popup on page load using HTML and jQuery
jQuery loop over JSON result after AJAX Success

JavaScript speech recognition example

JavaScript SpeechRecognition()

Complete Code: Javascript speech recognition

Related Articles