Original Source Here
Enrich Your Web Application With a Free A.I. Voice Recognition
Learn how to enable voice recognition for your web application using Chrome’s Web Speech API.
1. Instantiate the Recognition Object
The Web Speech API is currently supported by Chrome for Desktop and Android browsers. Therefore, we have to make sure we are instantiating the proper SpeechRecognition object:
The Web Speech API allows some configurations, such as setting the language or the maximum number of alternative predictions:
Of course, you might want to use it differently — so make sure you take a look over the official documentation and set up the proper configuration for your specific case.
3. Adding Listeners
It’s very simple to add listeners and react to the AI’s speech predictions:
At this point, we can already test our application. We can trigger the recording by calling: recognition.start()
Also, we’ll need to allow the browser to access the microphone.
After that, we can check the console and see the event we’ve received and the various predictions:
4. Integrate the Feature Within Your Application
It works! But it is not user-friendly. At this point, we need to trigger the recording from the UI, and not from the console.
Similarly, we need to process the speech predictions and display them on the page or use them somehow.
To finalize our concise demo, we’ll simply add a button to allow the user to start the recording and we’ll display the predictions on the page, as a list.
5. Test It, Play With the API, Have Fun
Finally, test it, try different configurations, and play with the API.
I believe this free feature it’s awesome and it can surely lead to some great ideas and applications.
Feel free to share your work or ideas in the comments.
The full source code:
Trending AI/ML Article Identified & Digested via Granola by Ramsey Elbasheer; a Machine-Driven RSS Bot