annyang! Speech Recognition with JavaScript Tutorial
Annyang is a tiny javascript library that lets your visitors control your site with voice commands. annyang supports multiple languages, has no dependencies, weighs just 2kb and is free to use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annyang!</title>
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
<script>
var messages = ['🔊 Hey', '🔊 Hi, there!', '🔊 Hi!', '🔊 Hello'];
if(annyang){
console.log("We have annyang!");
var commands = {
'Hello' : hello,
'What is your name' : myname
}
function hello(){
var randomIndex = Math.round(Math.random() * messages.length);
console.log(`%c ${messages[randomIndex]}`,'color: green; font-weight:bold;');
}
function myname(){
console.log("My name is Billy!");
}
// Add Commands
annyang.addCommands(commands);
// Start listening
annyang.start();
}
</script>
</body>
</html>Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
Comments are closed.
I’ve tried to run bellow annoyang code on my system but not working. it displays noting.
if (annyang) {
Alert (‘annyang is working’);
}
That’s strange. Try it in any Chromium browser and see if that works.
prueba lo con el console.log() a mi si me funciona correctamente
Hi i’m trying to make a voice driven website..i want to add commands like ‘ move to the next page’ or ‘previous page’..how do i do that?
I’ve already done something similar to what you are asking. There is a Video Tutorial, a Written tutorial and a Demo. Here is the tutorial:
https://raddy.dev/blog/create-a-custom-smart-assistant-device-using-web-technologies/
The only difference is that I use scroll instead of a page change.
Maybe you can do “location.href = ‘/mypage.html’;” instead and that should work.
I hope this helps 🙂
and also can i contact you to make this work…its very urgent..
if(annyang){
console.log(“we have annyang”);
var commands = {
‘show home’ : home,
}
function home(){
console.log(“Home”);
“location.href = ‘https://valkeshwarmahadev.in/gallery.html’;”
}
i tried this but i dint got the output bro
if(annyang){
console.log(“we have annyang”);
var commands = {
‘show home’ : home,
}
function home(){
console.log(“Home”);
“location.href = ‘https://valkeshwarmahadev.in/gallery.html’;”
}
i tried this but i dint got the output bro..i also added js library in the src tag
No double-quotes. Just location.href….
still not getting the result bro..if you can check it on the website that would be really helpful.
Try this instead: window.location.href = “https://valkeshwarmahadev.in/gallery.html”;
I just tested it on mine and seems to work. Let me know how it goes
when i tried this the system is not accessing the microphone..what shall i do now bro?
can u check the website and inspect it?
tried many variations bro but couldnt get the result..can u visit my website once and inspect it..
hey did u check it?
I did and I can’t seem to find anything Annyang on your website.
I checked scripts.min.js, main.min.js and custom.js…
bro you can check the source code on the home page and their you will find the annyang code written..the website is valkeshwarmahadev.in..cant place the link as it denies my request over here..pls check it
You have to close your home function and double-check the double quotes and the single quotes as sometimes when you copy them from the comments here they break.
if (annyang) {
console.log(“we have annyang”);
var commands = {
‘show home’: home,
}
function home() {
console.log(“Home”);
window.location.href = “https://valkeshwarmahadev.in/gallery.html”;
}
// Add Commands
annyang.addCommands(commands);
// Start listening
annyang.start();
}
I hope this helps and also look at their official documentation, which might help you out. I hope that you fix it brother
i tried this bro but the system is not acessing microphone only..i read the official document also but nothing is working..
tried everything brother but can’t get the output..i’m working as a trainee in a well known organisation and they have assigned me a task and i really wanna do this task.
i’m working as a trainee bro in a well known organisation and they have assigned me a task..i need to do this any how bro..
can we connect personally to solve this pls?
I am happy to guide you to solve your problem, but I can’t do your assignment. The last thing you can try is to debug the problem. You can use Annyang Debug to see what the problem is.
annyang.debug();Inspect your page, go to Console, wait a few seconds and see what it says.
As you are a trainee, your organisation should be helping you. Ask them for help, you are there to learn…
ofcourse bro i’ll do this by myself only and the thing is all the junior folks in the company haven’t been joined yet and they are working from home due to covid so i cant ask anybody over here..its just u can help me doing in this..i debugged the code and found nothing still the system is not accessing the microphone only..pls suggest me something its really imp for me or i’ll be jobless
as it is the first task given to me by the HOD , so i need to complete anyhow i’m working on ds and algo to build my logics but that will take something unless i need to survive..
thank u so much , it is working brother…now if i want to add comands like scroll up and down what shall i do?
and bro i tried to add another command named ‘contact page’ and used the same logic as above but it wasnt working and even the previous one was not working what could be the reason?
thank u so much , it is working brother…now if i want to add comands like scroll up and down what shall i do?and bro i tried to add another command named ‘contact page’ and used the same logic as above but it wasnt working and even the previous one was not working what could be the reason?
bro did u check the previous comments?
Did you watch or read the article? I literally explain everything in there step by step and I have many examples.
You can read more about functions here: https://www.w3schools.com/js/js_functions.asp
yes i did bro and everything is working but i want to add ‘scroll down’ and ‘scroll up’ commands within the page..i tried location.hash but it isnt working..
and supposedly bro in this website only which i’m working on i need to add a command like write a message in contact page how would i execute it?
ik i’m kinda being annoying to your brother but its really important..
Somewhere down your page (you need to have some scroll) you can place HTML anchors:
To invoke it you do location.hash and then the name of the anchor scrollToGallery.
location.hash = “scrollToGallery”;
Full function example:
function gallery() {
console.log(“Gallery”);
location.hash = “scrollToGallery”;
}
To test your anchor you can also put #anchorToGallery after your URL.
mywebsite.com#scrollToGallery
That should then scroll to your placed anchor. If you don’t have a scroll on your page it obviously has nowhere to movie/scroll.
I have so many examples here and I don’t know why you are not using them…
https://raddy.dev/blog/create-a-custom-smart-assistant-device-using-web-technologies/
done bro can see the results , but i want a command as if i say ‘write a message in contact page’ so it can execute that..for that what shall i do bro?
and bro thank you for helping this much , means a lot but pls i’ll ask u questions untill i get the results
i got the output in scroll up an down but bro i need to complete this one where i command ‘ write a message in contact page’ for that do what shall i need to do
I think that Annyang is only for voice commands. I am not sure if you can use it to write messages. For speech to text, you could use Speech to Text Cloud API. I think that Google and Microsoft have one. Both are not free, but I would assume that they are going to be really good.
right..but bro if i wanna make a voice driven website without annyang is it possible? like the logic of the code is same but i want the code to access my microphone and run the commands..
You can use Speech Recognition API, but the browser support is not great at the moment. Do some research and see what else is out there.
You don’t have to repost your questions multiple times. Sometimes the comments just go to spam and I approve them whenever I can.
i have tried speech recognition API but it isnt working in browser..and bro instead of making a voice driven website can we code for a voice driven browser? ik there are some already readymate software’s
There probably is something made for accessibility out there. Technically speaking our operating systems have a lot of accessibility functionalities that can be used to navigate thru websites. As long as you make your website accessible by following the a11y standards you should be good.
What are you actually trying to achieve?
Actually the AVP has given me a task of including voice driven functions on the admin pannel so they dont have to click anything they can just control the pannel from voice for an eg: if somebody wants to see notifications they can just call out notifications and all the noti comes to the screen..so ya voice control idea..
Do u have any idea on how do i achieve that?
Annayang or the Web Speech API. Speak with your team and see what they say.