Go ahead, try it…
Say "Hello!"
Annyang!
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 src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.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'});
}
};
// Add our commands to annyang
annyang.addCommands(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 *tag': 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(tag) {
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.
annyang plays nicely with all browsers, progressively enhancing modern browsers that support the SpeechRecognition standard, while leaving users with older browsers unaffected.
Please visit http://www.annyangjs.com/ in a desktop browser like Chrome.