Speech recognition, the JavaScript (annyang) way

A cool way to make your website or app interact with you by voice commands!
By Tudor Lehene Posted 19 January 2017

Speech recognition, the JavaScript (annyang) way

We all know that speech recognition is being used more and more and I recently asked myself if it can be done with JavaScript. Silly question, of course it can be done with JavaScript! We just have to use a library for that :).

All the new devices around the world have at least a tool for voice command, translation or voice changer. And if they don't have, you can download an app that can do that.

How could a speech recognition tool help us?

I think the answer here can be limitless. From giving instructions to a computer to commanding a robot or giving an IT job to a blind person! All we have to do is develop the correct tool that allow us to do that.

Today I want to talk about a library called "annyang", a great library that allows us to easily add a voice recognition feature to our app or website.

To get the annyang library we just have to add the CDN to our project by pasting this just before the closing head tag () from our HTML:

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js](https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>

How does it work?

It's simple. The browser will request for user permission to the microphone and after the listening is turned on, everything you say is being transmitted to a cloud where the speech-to-text magic happens. This means that the connection speed is important in order to get fast, accurate results and also this means that it can't be used offline :(.

Because our cultures are different, you may be asking about the supported languages… I'm sure that 99% of this post readers speak a language that can be recognized by annyang. If it recognizes Yue Chinese (Hong Kong traditional) then it recognizes any language ^_^.

Of course, this isn't the only library out there to transform your app into magic but in my opinion this is an easy to use one.

Ok now, let's see what can annyang technically do:

After importing the annyang CDN as explained above, we'll initiate the annyang instance onLoad and we have to check if annyang object is loaded because we don't want to inject any JS errors.

Initiale Annyang on load

After our safety measures were taken we'll declare our "commands" object, the object where we'll declare our commands just like in the code snippet above.

Of course, after we declare all our commands, we have to get everything started by passing the commands to annyang and initiate the instance:

Passing commands to Annyang

That's all you have to do to create a simple method that triggers when you say "play video!".

What if we want to create more complex methods? What can annyang do?

Well, annyang has three syntaxes in order to expand its capabilities:

1 Splat:

Passing commands to Annyang

2 Named variables:

Named variables

3 Optional words or phrases:

 Optional words or phrases

Before getting a "hands on" session be aware that the https protocol is very important. The tool works on http too, but the speed is slower and also the browser will ask for user permission on every page load, which is annoying for the users.

If you think you can become a superhero using annyang then you will find these links useful:

NPM: https://www.npmjs.com/package/annyang

GIT repo: https://github.com/TalAter/annyang/

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

API: https://github.com/TalAter/annyang/blob/master/docs/README.md

Tutorial: https://www.talater.com/annyang/

"annyang, make me a superhero!" :)

Tudor Lehene
Tudor Lehene
Frontend Developer