我有一个网页,可以记录用户的语音并将其附加到 HTML 表单中。代码正在“工作”,但是一旦语音识别停止然后重新启动,新的语音到文本数据将覆盖第一个框的数据。我想将下一个重新启动的文本语音仅附加到第二个框,而不是第一个框,同时将第一个框的数据保留在那里。
JS:
<form class="texts" action="/care" id="careid" name="care" method="POST">
<input type="text" id="name" placeholder="what's your name?">
<input type="text" id="location" placeholder="Where are you?">
<input type="text" id="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>
window.SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
let p = document.createElement('p');
recognition.addEventListener("result", (e) => {
const text = Array.from(e.results)
document.getElementById("name").value = event.results[0][0].transcript;
}
);
recognition.addEventListener("end", () => {
recognition.start();
recognition.addEventListener("result", (e) => {
const text = Array.from(e.results)
document.getElementById("location").value = event.results[0][0].transcript;
});
});
</script>
答案 0 :(得分:1)
如何为输入标签定义一个默认值变量,而不是直接向表单添加值,您可以将其分配给变量,然后在表单中获取其更新。
答案 1 :(得分:0)
我们可以将输入放在一个数组中,并让计数器告诉我们要写入哪个。
let counter = 0;
let inputs = document.querySelectorAll('input[type=text]')
recognition.addEventListener("result", (e) => {
if (inputs.length< counter) inputs[counter].value = e.results[0][0].transcript;
counter++;
});