Speech to Text using HTML and JavaScript API

In this tutorial we will learn how to convert speech to Text in HTML using JavaScript API. It's a very powerful browser interface that allows you to record human speech and convert it into text. 

Let's Start!

The Web Speech API is actually separated into two totally independent interfaces. We have SpeechRecognition() for understanding human voice and turning it into text (Speech -> Text).

The Speech Recognition API is surprisingly accurate for a free browser feature. It recognized correctly almost all of our speaking and knew which words go together to form phrases that make sense. It also allows you to dictate special characters like full stops, question marks, and new lines.

The first thing we need to do is check if the user has access to the API and show an appropriate error message. Unfortunately, the speech-to-text API is supported only in Chrome and Firefox (with a flag), so a lot of people will probably see that message.

First of all, we have to create a index.html and we will add all html and JavaScript code in the single page.

HTML Code are as follow

<button type="button" onclick="speechRecognition()">Start Recognition</button> &nbsp; <span id="action"></span>
    <br>
    <textarea id="output"></textarea>

JavaScript Code are as follow

function speechRecognition() {
            var output=document.getElementById('output');
            var action=document.getElementById('action');

            var SpeechRecognition=SpeechRecognition || webkitSpeechRecognition;

            var recognition=new SpeechRecognition();

            recognition.onstart=function(){
                action.innerHTML="<small>Start Listening! Please speak</small>";
            };

            recognition.onspeechend=function(){
                action.innerHTML="<small>Stopped Listening! hope you are good...</small>";
                recognition.stop();
            }

            recognition.onresult=function(event){
                var transcript=event.results[0][0].transcript;
                output.innerHTML=transcript;
            };
            recognition.start();
        }

Yup! That's it. Now enjoy and put your command on action. Keep Learning!