| Coding Tutorials

Speech RecognitionIt'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.

SpeechRecognition

Now say "Hello" and wait for the reply message:

SpeechRecognition

 

 


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.