DEV Community

Cover image for Add Speech Recognition to your web app
Uriel Bitton
Uriel Bitton

Posted on

Add Speech Recognition to your web app

Adding speech recognition capabilities to your website seems like a daunting task. However, thanks to a new framework called Annyang, it has never been easier.

Annyang makes use of the web speech API integrated inside your browser. Every browser has a different support flexibility towards the speech API so just note that it is not consistent across all browsers.

Also important to note that speech recognition currently only functions with a secure HTTPS connection only, so to save you much frustration, using it on your local files or a non-HTTPS connection will simply not work.

With this in mind let's learn how we can integrate speech recognition into our web apps.

The first thing we'll do is link the annyang script to our head tag in our html file

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
    <!--optional jquery script because we are using jquery instead of jaavscript-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

Now let's initialize annyang in a script tag (we can also link to external JS file)

<script>
if (annyang) {
  //we first declare a command variable, adding first the text we wish to speak out to our device, then the action we wish to create
  var commands = {
    'make background red': function({$('body').css('background','red')},
    'make text green': function({$('p').css('color','green')}
  };

  // then we 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>
Enter fullscreen mode Exit fullscreen mode

Then we need of course a body tag with some p tags in our app:

<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
</head>
<body>
   <p>Some text...</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

That's all we need to intiate our web app with speech recognition!

Now just speak the commands and the actions will respond accordingly.

Enjoy!

Annyang Website: https://www.talater.com/annyang/

Like always see you int he next post.

Uriel Bitton
Website: www.flexrweb.com
My new app: www.quadflowapp.com

Top comments (0)