Enrich Your Web Application With a Free A.I. Voice Recognition


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.

Photo by Lyman Hansel Gerona on Unsplash

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:

2. Configuration

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.

because they don’t know how to join tables 🙂

The full source code:


Trending AI/ML Article Identified & Digested via Granola by Ramsey Elbasheer; a Machine-Driven RSS Bot

%d bloggers like this: