annyang! SpeechRecognition that just works

annyang is a tiny javascript library that lets your visitors control your site with voice commands.

annyang supports multiple languages, has no dependencies, weighs just 2kb and is free to use.

Go ahead, try it…

Say "Hello!"

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 src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.0.0/annyang.min.js"></script>

<script>

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>

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.