为什么我在js上的语音识别不起作用？答案

【问题标题】：Why is my speech recognition on js not working?为什么我在js上的语音识别不起作用？
【发布时间】：2021-06-26 19:02:46
【问题描述】：

我一直在关注this，并补充了各种 youtube 视频和堆栈溢出问题。但是，我不确定为什么我的语音识别不起作用。很少有人问我是否允许使用麦克风。

我希望用户麦克风拾取用户的语音并将其附加到某个输入值。这是我的代码：

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();
              });

这是我得到的错误：

未捕获的 ReferenceError：未定义识别在 HTMLButtonElement.onclick

未捕获的 SyntaxError：标识符“识别”已被声明

加载资源失败：net::ERR_FAILED

【问题讨论】：

您是否检查过浏览器开发者工具控制台的消息/错误/警告等？ const recognition = new SpeechRecognition(); 后跟 var recognition = new SpeechRecognition();（更不用说 3 x var recognition = new SpeechRecognition(); 将失败每次
将错误添加到底部！你建议我如何解决它？
我告诉过你为什么会发生Uncaught SyntaxError: Identifier 'recognition' has already been declared - 不确定其他错误，可能是你没有发布的代码

标签： javascript html

【解决方案1】：

我使用 SpeechRecogition 已经有一段时间了，起初它可能非常棘手。但是，我发现这个要点非常对我很有帮助。希望这段代码可以帮助您像我一样理解 SpeechRecogition。

要点：https://gist.github.com/strongSoda/27f4caf1335e3d03accf708e1fcdcbf0

Youtube 教程（对应代码）：https://www.youtube.com/watch?v=4eIRrowvLRk

【讨论】：

这似乎有效。但是现在将成绩单附加到特定输入。我在教程中没有找到...我该怎么做？
会不会是因为我也在播放视频？我需要在这里做异步的事情吗？

【解决方案2】：

音频表单填写代码如下：

            
            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 代码运行器不允许语音，所以这里是工作代码 sn-p： https://codepen.io/aakash1282/pen/xxqeQyM

【讨论】：