Newbie here. I work on a website where I have to click buttons. I need to be able to click on buttons based on their DIV ID using speech recognition. Lets say a clickable button div has an ID of one, I want to say ONE verbally and have the button clicked.
I am guessing I need Javascript click function combined with a speech recognition API. I can handle using Javascript to manipulate HTML DOM, but how do I interface with an offline speech recognition API. Which one should I use and how do I go about using it?
If you want to test speech recognition you can check MDN docs the page include link to github with demos.
Here is my code based on color example (<com.sun.speech.app.numbers.*> is taken from w3c docs about grammars)
<!DOCTYPE html>
<html>
<body>
<script>
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
var grammar = '#JSGF V1.0; import <com.sun.speech.app.numbers.*>; grammar numbers; public <number> = <com.sun.speech.app.numbers.*>;'
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = true;
recognition.maxAlternatives = 1;
recognition.onerror = function(event) {
console.log(event.error);
};
document.body.onclick = function() {
recognition.start();
console.log('Ready to receive a number command.');
};
recognition.onresult = function(event) {
var numbers = ['zero', 'one', 'two'];
console.log(event.results);
var last = event.results.length - 1;
var number = event.results[last][0].transcript;
console.log(numbers[number]);
var node = document.querySelector("#" + numbers[number]);
if (node) {
node.style.color = 'red';
}
};
</script>
<div id="one">one</div>
<div id="two">two</div>
</body>
</html>
unfortunetelly speech recognition is disabled for Stack Snippets but here is link to codepen IMO speech recognition in browsers is not very good it don't recognize words you're saying, you need to repeat the word few times to make it work.
