Voice control with Annyang

Something that’s always welcome are plugins that enhance usability on websites, especially when they assist people with disabilities.

Annyang is a great example of that. It’s a plugin that helps you set up speech recognition on your site. It assists people with visual impairments and it’s just plain cool to boot.

Currently it’s only supported by Chrome, but it degrades gracefully so it’s usable now.

Using Annyang

Annyang doesn’t have any dependencies, so all you need to do to get it working is to load Annyang.js onto your page and all the setup is done!

The most basic usage, the obligatory ‘Hello world’ example, checks if Annyang is there, then sets up a variable called commands in which we’ll define our commands, then set the init and start functions:

if (annyang) {
  var commands = {
    // Our commands
  }
  };
  annyang.init(commands);
  annyang.start();
}

We can then add the following to our commands which will create an alert that reads ‘world!’ when the user speaks the word ‘Hello’:

'Hello': function() {
   alert('world!');
}

As you can see all we did was first define a command and then set up a function declaring what we want the plugin to do after it hears the user speaking the keyword. In this case we just alerted a string.

Another thing we can do with Annyang is improve navigation a little by faking click events when a user speaks the name of a page s/he’d like to visit.

To do this we set up a function just like the ‘Hello world!’ example, but this time, instead of an alert we use a jQuery command to trigger a click on the appropriate link:

'work': function() {
  $('#work').trigger('click');
}

Another great thing we can do with this plugin is improve forms by having the user spell his or her name and input that for them, rather than having to type it:

'name is *theValue': function(theValue) {
  $('#name').val(theValue);
}

You’ll notice in the example above there’s an ‘*’ before the second ‘name’ in the command. That tells Annyang to pass whatever the user says after ‘name is’ to the function as a parameter.

Conclusion

Annyang is definitely a step forwards when it comes to the Web.

It adds a layer of usability to a website with minimal code and without infringing on other navigation methods.

I definitely recommend giving it a try.

Have you used Annyang? What alternative approaches to speech recognition have you used? Let us know in the comments.