In continuation with my last article on Chrome’s Web Speech APIs, I stumbled across a much easier way to add speech recognition to a web application or site. “annyang” is a JavaScript library to add voice commands to your site. It makes use of Web Speech APIs only but adds a nice thin layer to make it much more usable. Not to mention, it is super easy to get started.
A tiny JavaScript Speech Recognition library that lets your users control your site with voice commands.
annyang!
annyang is developed by Tal Ater, same fella who reported how a bug in Chrome could be exploited to listen to users conversations even after user left the site. Incidentally, he discovered this while he was working on annyang itself.
annyang just adds 2 kb to your site, but it makes Web Speech APIs extremely usable. The basic premise here is that it allows developers to add voice commands and action to be taken when a user says those commands on his site/application. Simply include the annyang.js library and start adding commands. The sample below shows all the code you need to show “Hello World!” alert to the user who says “hello” on your site. Awesome, isn’t it?
[sourcecode language=”javascript”]
// Include annyang from a CDN service or from your own server.
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.4.0/annyang.min.js"></script>
<script>
// check if speech recognition is supported
if (annyang) {
// Define your commands
var commands = {
‘hello’: function() { alert(‘Hello World!!!’); }
};
// Use addCommands API to add commands to annyang
annyang.addCommands(commands);
// Start listening. You call this right here or do it later on some event like button click
annyang.start();
}
</script>
[/sourcecode]
Apart from one-word commands as shown above, annyang supports more complex commands which allow commands with named variables, splats or optional words.
Named variable is a single word variable, which can be added anywhere in the command text. For e.g. ‘show :month articles’
[sourcecode language=”javascript”]
<script>
var commands = {
// saying ‘show December articles’ will call ‘showArticles’ function with ‘December’ as a parameter
‘show :month articles’: showArticles,
};
var showArticles = function(month) {
// Code to open articles for said ‘month’
}
</script>
[/sourcecode]
A splat will capture anything after * and make it available to your function.
[sourcecode language=”javascript”]
<script>
var commands = {
// saying ‘search chrome bookmarks’ will call ‘performSearch’ function with ‘chrome bookmarks’ as parameter
‘search *term’: performSearch,
};
var performSearch = function(term) {
// Code to perform a search for the said ‘term’
}
</script>
[/sourcecode]
You may also include optional words in your command. For e.g. a command ‘show (open) :month articles‘ will respond to both ‘show December articles‘ or ‘open December articles‘. Just include your optional words in brackets and you’re good to go.
The library will work with browsers that support SpeechRecognition (only Chrome as of now) and leave all other users unaffected.
Do checkout this nice video of a todo application built using Angular JS and annyang.
Quick Tip
If you are developing locally (over HTTP) and troubled by repeated permission asked by Chrome to use the microphone, you should consider switching to HTTPS. Not only that HTTPS returns speech results faster, but also enhances user experience along with added security. For your testing purpose, it is easy to securely expose your localhost to the internet using awesome tools like ngrok.
. However, it only lists the top two or three bookmarks. Sometimes you need to dig deeper and perform a search in your Bookmarks Manager. Recently, I stumbled upon something really useful. You can easily configure your Chrome to search for your bookmarks directly from omnibox or address bar. In-fact, there is an extension which does that for you. Head over to the Chrome Web Store and install 
