Build on Speech Recognition for comments using Web Speech API
Voice your opinion, literally.
On this episode, we will look at how to use speech recognition in-browser and build a comments system application based on speech-to-text.
Web Speech Api has two functions, speech recognition which is speech-to-text and speech synthesis which is text-to-speech. We’ll have a look at speech recognition and how browsers recognize speech using SpeechRecognition API.
What you need
To be able to integrate speech recognition in our app, we’ll first look at how to hook up a basic speech recognition app on browser. Here is what is required:
- Google Chrome
- Text editor
Most of the work will be done in plain HTML, CSS and JavaScript to illustrate how to use SpeechRecognition API.
Speech Recognition API
The API as of now is only supported in Chrome as illustrated in chart below
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.
How to use it?
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;const recognition = new window.SpeechRecognition();
The first part is setting up the recognition interface to SpeechRecognition regardless of the browser.
Next we create a speech recognition object which can be called from anywhere. The object has many methods, properties and event handlers. In our case will be using:
· recognition.interimResults = true property controls whether interim results, which are not final, should be returned or not
· recognition.start() to start the process
The addEventListener() method is used to map the results and convert them to one string.
Below is the JS file that applies Speech Recognition.
The entire code can be found on my Github.
Output
Implementation of Speech Recognition on Comment system
The Realtime Comment System was based on SocketIO, MongoDb and JavaScript. Sockets are just another protocol for sending messages over the network.
Using your voice the you can post comments which are then converted to text then posted.
Now we can talk to the Browser
In this post you’ve seen how to use the Web Speech Api for Speech Recognition. Additionally more can be integrated such as speech synthesis for responses using voice.
I’m excited about the potential of such API’s which enable chat-like applications with voice on the browser and much more..
Drops mic🎤😎
