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>
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>
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>
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)