Get the App
SLTechnology News&Howtos  ›  Development  › 

How to realize speech recognition by JavaScript

Shulou Source: shulou.com Published: 2022-06-03 05:12:24 09月21日 Update

This article will explain in detail how to achieve speech recognition in JavaScript. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Here is an open source JavaScript language input library called annyang.

Github address: https://github.com/TalAter/annyang

As of July 12, 2018, the github warehouse had 4833 Star.

Annyang is actually a 2KB-sized JavaScript script file that is very easy to use.

Let's do a Hello World application with me and see how your voice through the microphone is recognized by this JavaScript library file.

Create a new html file and copy the following code into it. Deploy it to your local Tomcat or nodejs server.

If (annyang) {var commands = {"Hello": function () {alert ("I have heard your voice!")}}; var commands2 = {"Bye": function () {alert ("good-bye!") ;} annyang.addCommands (commands); annyang.addCommands (commands2); annyang.start ();}

I used Chrome for the test.

The first time you visit this page in a browser, the following Chrome dialog box pops up, prompting you that the app should use the microphone on your computer. Just click the Allow button.

There are two places for this application to remind you that it can accept voice input. The first is the small red circle in figure 1 below.

The second is a small microphone icon, which can be set to allow or disable microphones after clicking. Of course, we have to choose to allow it, otherwise how can we accept voice input?

If your laptop also has a microphone, you can choose whether to use the laptop's own microphone or an external microphone from this drop-down menu. I used the latter.

You can test it now.

Because the execution function I bound to Hello in the code is an alert pop-up dialog box, when I said "Hello" into the microphone, my browser immediately popped up the dialog box.

Similarly, "good-bye" pops up after saying "Bye". I set a breakpoint in the function that responds to the voice "Bye", and you can also observe the processing logic of annyang through the call stack.

From annyang's github, we can see that Chinese is also on the list of supported pronunciation, so feel free to use it boldly.

Https://github.com/TalAter/annyang/blob/master/docs/FAQ.md

Even Cantonese is supported. Awesome!

For more details, please refer to annyang's website.

Https://www.talater.com/annyang/

This is the end of the article on "how to achieve speech recognition in JavaScript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Tags: Microphones microphones voice dialogs more articles conversations applications input code functions files browsers computers notes notebooks face-to-face prompts support testing Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Technology Docker Microsoft MySQL MariaDB