Making Speech to text converter using the HTML5 WebSpeech API

Hello guys,

So I was working on this project that is a web-port of a Native App.
Basically the client wants to provide the user with an audio clip that is played for him with the text underneath it.

Then the user has to repeat the sentence, our app will output what the user said on the screen so that the user can evaluate his grip over the language.

To perform this task, I had to do some research upon which I found out that there is actually a Web Speech API support available for browsers.

The Web Speech API, is currently only supported by the chromium-based browser like Chrome version 25 and up, also it is currently only available in nightly builds of Mozilla Firefox. This is due to the fact that Web Speech API currently utilizes Google's text to speech tech.

Here is the basic example of how you can use Web Speech API yourself.

This little piece of code will start the listener, the browser might ask for microphone request, you have to accept it.

Then just speak anything and when you are done. You will see some output on the console.

So let me break it down for you -

Tag #1 initializes webkitSpeechRecognition, which is what makes the Text-To-Speech come to life.

Tag #2 attaches an event handler for when the process of recognition is complete and provides us with a SpeechRecognitionEvent object.

Tag #3 starts the speech recognition engine, the browser will now start listening to you.

The response object can be used to fetch the recognized text. If you navigate it, you will find that response.results contains a list of all the results that were a similar match.

You can fetch the return result from response.results[0][0].transcript and the degree of accuracy by response.results[0][0].confidence.

Also you can use variety of handler callbacks like speechstart, speechend but more on that later.

If the pen doesn't work here, please visit the link given below.

See the Pen Make text to speech converter ssing the HTML5 WebSpeech API by Shubham Singh Chahar (@shubhamsinghchahar) on CodePen.