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 close 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.

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 recognizes 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>