Why is my speech recognition on js not working?

user_15527946 0
Viewed 478

I've been following this and supplementing it with various youtube videos and stack overflow questions. But, I am not exactly sure why my speech recognition is not working. I am asked about allowing microphone access rarely.

I want the user microphone to pick up the user's speech speech and append it to a certain input value. Here's my code:

const recognition = new SpeechRecognition();
              recognition.interimResults = true;

              var recognition = new SpeechRecognition();
                recognition.onresult = function(event) {
                  if (event.results.length > 0) {
                    name.value = event.results[0][0].transcript;
                  }
                }

              recognition.addEventListener("end", () => {
                recognition.start();
              });

              var recognition = new SpeechRecognition();
                recognition.onresult = function(event) {
                  if (event.results.length > 0) {
                    location.value = event.results[0][0].transcript;
                  }
                }
              
              recognition.addEventListener("end", () => {
                recognition.start();
              });

              var recognition = new SpeechRecognition();
                  recognition.onresult = function(event) {
                    if (event.results.length > 0) {
                      state.value = event.results[0][0].transcript;
                      document.care.submit();
                    }
                  }
              
              recognition.addEventListener("end", () => {
                window.location.pathname = '/care';
                document.care.submit();
              });

Here are the errors I am getting:

Uncaught ReferenceError: recognition is not defined at HTMLButtonElement.onclick

Uncaught SyntaxError: Identifier 'recognition' has already been declared

Failed to load resource: net::ERR_FAILED

html javascript
2 Answers
user_156362640

Here is audio form filling code:

            
            function SpeechRecog() {
                var output = document.getElementById("output");
                var action = document.getElementById("action");
                var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
                var recognition = new SpeechRecognition();
            
                // This runs when the speech recognition service starts
                recognition.onstart = function() {
                    action.innerHTML = "<small>listening, please speak...</small>";
                };
                
                recognition.onspeechend = function() {
                    action.innerHTML = "<small>stopped listening, hope you are done...</small>";
                    recognition.stop();
                }
              
                // This runs when the speech recognition service returns result
                recognition.onresult = function(event) {
                    var transcript = event.results[0][0].transcript;
                    var confidence = event.results[0][0].confidence;
                    output.value=transcript;
                };
              
                 // start recognition
                 recognition.start();
            }
button{
  color:white;
  background:blue;
  border:none;
  padding:10px;margin:5px;
  border-radius:1em;
}
input{
  padding:.5em;margin:.5em;
}
 <p>I'm Aakash1282,<br> Are you lazy, here is voice writer for your</p>
        <p><button type="button" onclick="SpeechRecog()">Write By Voice</button> &nbsp; <span id="action"></span></p>
        <input type="text" id="output">

Stack Overflow code runner don't permit voice, so here is working code snippet: https://codepen.io/aakash1282/pen/xxqeQyM

Admin1
Related