Annyang is not displaying input command

Question

I am working on a project and need to input data in a form which contain input task name type=text with id=task_name. The user should be able to input data using annyang voice recognition, annyang is starting and can see red dot on page but when passing the commands nothing shows up, did i make an error somewhere. Clicking on a button will make annyang start and after that user could add use voice command to input data but voice command is not working.

Here is my code

<script>
        
    start_vc.addEventListener('click', () => {

    const speech = new SpeechSynthesisUtterance();

    speech.text = 'How can i help you!';
    speech.lang = 'en-UK';
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 1;
    
    window.speechSynthesis.speak(speech);

    if (annyang) {
        
        var commands = {

            'input task name': function(variable) {
                let task_name = document.getElementById("task_name");
                task_name.value = variable;
            }
        };
      
        // Add our commands to annyang
        annyang.addCommands(commands);
      
        // Start listening.
        annyang.start();
      }

});
    </script>

Did i make an error somewhere and if i made an error can someone tell me what was it i kind of new to javascript

Answer 1

Your code will make annyang listen for the voice command "input task name" because you define that command here:

Try saying "input task name" and see if it places that sentence into the task_name field.

You will want to replace that text with a command that will catch any sentence the user says.

For example:

var commands = {
    '*variable': function(variable) {
        let task_name = document.getElementById("task_name");
        task_name.value = variable;
    }
};

annyang.addCommands(commands);

---

I would also recommend adding annyang.debug() to your code while developing.