Voice control for websites with Annyang

Ready to get started?

Grab the latest version of annyang.min.js, drop it in your html, and start adding commands.
…or just say "let's get started!"

Are the web's clicking days numbered? Annyang is a fantastic JavaScript library that lets your visitors control your site with voice commands. Made by Tal Ater.

annyang is a tiny javascript library that lets your visitors control your site with voice commands.
annyang supports multiple languages, has no dependencies, weighs less than 1kb and is free to use.

Go ahead, try it…

Say "Hello!"

Let's try something more interesting…

Say "Show me cute kittens!"

Say "Show me Arches National Park!"

Now go wild. Say "Show me…" and make your demands!

That's cool, but in the real world it's not all kittens and hello world.

No problem, say "Show TPS report"

How did you do that?
Simple. Here is all the code needed to achieve that:

<script type="text/javascript" src="annyang.min.js"></script>
<script type="text/javascript">
if (annyang) {
  // Let's define our first command. First the text we expect, and then the function it should call
  var commands = {
    'show tps report': function() {
      $('#tpsreport').animate({bottom: '-100px'});
    }
  };

  // Initialize annyang with our commands
  annyang.init(commands);

  // Start listening. You can call this here, or attach this call to an event, button, etc.
  annyang.start();
}
</script>

What about more complicated commands?
annyang understands commands with named variables, splats, and optional words.
Use named variables for one word arguments in your command.
Use splats to capture multi-word text at the end of your command (greedy).
Use optional words or phrases to define a part of the command as optional.

<script type="text/javascript">
var commands = {
  // annyang will capture anything after a splat (*) and pass it to the function.
  // e.g. saying "Show me Batman and Robin" is the same as calling showFlickr('Batman and Robin');
  'show me *term': showFlickr,

  // A named variable is a one word variable, that can fit anywhere in your command.
  // e.g. saying "calculate October stats" will call calculateStats('October');
  'calculate :month stats': calculateStats,

  // By defining a part of the following command as optional, annyang will respond to both:
  // "say hello to my little friend" as well as "say hello friend"
  'say hello (to my little) friend': greeting
};

var showFlickr = function(term) {

var url = 'http://api.flickr.com/services/rest/?tags='+tag;
  $.getJSON(url);
}

var calculateStats = function(month) {
  $('#stats').text('Statistics for '+month);
}

var greeting = function() {
  $('#greeting').text('Hello!');
}

</script>

What about browser support?
annyang plays nicely with all browsers, progressively enhancing browsers that support SpeechRecognition, while leaving users with older browsers unaffected.