Pure JavaScript Voice To Text Recognition Code Snippet

This Article Was Live On May 4th, 2023 And So Far Have: 0 Comments...
Last Updated on May 4th, 2023

The reason for speech recognition is for a PC or machine to effectively recognize the words verbally expressed by anybody. With this technique, there is no compelling reason to focus on more personal details, for example, emphasis, cadence, and so forth. It provides lots of advantages in developing software. As less than half the time it takes to recognize 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 technology has moved rapidly from our cell phones 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.

Table of Contents

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.

Recommended For You:

Check/Uncheck All HTML Checkbox Tags Using JavaScript On Click

There are many code snippets available online or on many other blogs and websites, but everyone cannot optimize your blog or website, so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.

CLICK HERE TO SEE DEMO

Features:

Light Weight.
Pure JavaScript.
Cross Browser.
No External Files.
Fully Customizable.
Responsive.

Complete Code: Javascript Speech Recognition Example

Here is the complete code to recognize speech using JavaScript code. There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly.

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

Recommended For You:

Add A Simple Pagination On Long Table Using Pure Vanilla JavaScript

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need.

Troubleshooting the Errors:

Do it with concentration and patience. Check your all steps again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.