My Experiments With Annyang!

Karan Balkar
Tech, Speech recognition, Tips and tricks
Page content

Note: Please allow access to microphone to use speech recognition feature.

Hi everyone!

Speech recognition has always being one of those features that is always perceived to be good based on it’s acccuracy. There exists a ton of libraries today that offer this functionality in almost any kind of app.

I happened to stumble upon Annyang a few weeks back and wanted to try it in an existing PWA (Progressive Web App). One of the good things about this library is that it’s quite lightweight.

A pretty basic implementation of it,

Try saying ‘scroll down’


var scrollDownPage = function() {
   $('html,body').animate({scrollTop: document.body.scrollHeight},"slow");
};

var scrollUpPage = function() {
  $('body').scrollTop(0);
};

if (annyang) {

    //add commands
    var commands = {
      'scroll down': scrollDownPage,
      'scroll up': scrollUpPage,
    };

    var notConnected = function () {
        console.log('not connected');
    }

    // OPTIONAL: activate debug mode for detailed logging in the console
    annyang.debug();

    // Add some commands
    annyang.addCommands(commands);

    // Set language
    annyang.setLanguage('en');

    // Start listening.
    annyang.start();

      annyang.addCallback('error', function (error) {
        console.log('There was an error during speech recognition==>'+JSON.stringify(error));
    });

    annyang.addCallback('resultMatch', function (userSaid, 
    commandText, phrases) {
        console.log("commandText==>" + commandText); 
    });

    // pass local context to a global function called notConnected
    annyang.addCallback('errorNetwork', notConnected, this);

}

Now, try saying ‘scroll up’

That’s it for this post. Hope this helps give you an idea about how one can quickly integrate speech recognition to an existing website.