javascript - 如何将语音识别中的测试附加到 javascript 中的特定输入框中？

Question

我有一个用烧瓶、js 和 html 构建的 wbesite。目的是让用户通过他们的麦克风与视频进行交互。我希望将用户的口头数据附加到下一页的表格中。我的程序使用来自用户的语音识别，目前将其附加到段落中。我希望它按顺序附加到三个不同的框。我只是改变附加的孩子吗？我是 javascript 新手，真的很困惑。我该怎么做呢？

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="vid1Title" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-body">
                    <video width="100%" id="video1">
                      <source src="./static/movie.mp4" type="video/mp4">
                    </video>
                    <form class="texts" action="/care" id="careid" name="care" method="POST">
                      <input type="text" id="1" name="name" placeholder="what's your name?">
                      <input type="text" id="2" name="location" placeholder="Where are you?">
                      <input type="text" id="3" name="state" placeholder="how can I help?">
                      <input id="buttonInput" class="btn btn-success form-control" type="submit" value="Send">
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <script>
              const texts = document.querySelector(".texts");

              window.SpeechRecognition =
                window.SpeechRecognition || window.webkitSpeechRecognition;

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

              let p = document.createElement("p");

              recognition.addEventListener("result", (e) => {
                texts.appendChild(p);
                const text = Array.from(e.results)
                  .map((result) => result[0])
                  .map((result) => result.transcript)
                  .join("");

                p.innerText = text;
                if (e.results[0].isFinal) {
                  if (text.includes("how are you")) {
                    p = document.createElement("p");
                    p.classList.add("replay");
                    p.innerText = "I am fine";
                    texts.appendChild(p);
                  }
                }
              });

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

              recognition.start();

              $('#myModal').on('shown.bs.modal', function () {
                  $('#video1')[0].play();
                })
                $('#myModal').on('hidden.bs.modal', function () {
                  $('#video1')[0].pause();
                })

                video = document.getElementById('video1');
                video.addEventListener('ended',function(){       
                  window.location.pathname = '/care';
                  document.care.submit();
                })
            </script>

标签： javascriptspeech-recognition