Voice Control for Websites With annyang!

It’s increasingly common to control your devices using speech.

Google has speech recognition built into the Chrome browser. Apple and other Android manufacturers have voice control built into their cell phones.

Now, thanks to annyang!, you can add voice control to your website. annyang! is a tiny javascript library that’s really easy to add to your site.

In this tutorial, you will learn how to use this library doing a quick example.

Step #1. Load annyang!

Inside any HTML file, add the following code just before the closing head tag:<script src=”https://cdnjs.cloudflare.com/ajax/libs/annyang/1.1.0/annyang.min.js”></script>

Step #2. Adding your voice command

Now that you’ve loaded annyang! you can now add your voice commands.

For this example we’re going use the voice command ‘Hello’ to get a response from the website. Add this code immediately after the code you added in Step 1:

<script>
window.onload = function(){
if (annyang) {
var commands = {
'Hello': function() {
alert('Hi! I can hear you.');
}
};
annyang.addCommands(commands);
annyang.start();
}
}
</script>

Step #3. Test the voice control

Open your HTML file using Google’s Chrome browser.

If everything is fine, you will see a notification on top of the browser. Click on the “Allow” button to give your file access to the computer’s microphone.

Now say “Hello” and wait for the reply message: