如何解决SpeechRecognition语音识别时重复文本出现在新段落的问题？

当前使用SpeechRecognition实现语音识别时，存在这样的问题：当在开头说“hello”时，“hello”总会出现在下一个段落中。原代码如下：

const texts = document.querySelector(".texts");

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

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

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

recognition.addEventListener("result", (e) => {

  const text = Array.from(e.results)
    .map((result) => result[0])
    .map((result) => result.transcript)
    .join("");

  p.innerText = text;
  texts.appendChild(p)

  if (e.results[0].isFinal) {
    if (text.includes("hello")) {
      p = document.createElement("p");
      p.classList.add("replay");
      p.innerText = "Hi";
      texts.appendChild(p);
    }

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

  console.log(e);
});

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

recognition.start();

问题根源 #

1. 开启continuous: true后，e.results会累积所有已完成和未完成的识别结果，原代码每次拼接所有结果，导致新段落重复历史内容
2. 每次result事件都执行texts.appendChild(p)，重复添加同一个DOM元素，逻辑冗余
3. 判断isFinal时用了e.results[0]，这是最早的识别结果，而非当前完成的最新结果，逻辑错误

修复方案及代码 #

const texts = document.querySelector(".texts");

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

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

// 初始化段落并添加到DOM，避免重复append
let p = document.createElement("p");
texts.appendChild(p);

recognition.addEventListener("result", (e) => {
  // 仅处理最新的识别结果，避免累积历史内容
  const latestResult = e.results[e.results.length - 1];
  const currentText = latestResult[0].transcript;

  // 更新当前段落的文本内容
  p.innerText = currentText;

  // 当当前识别结果完成时
  if (latestResult.isFinal) {
    // 匹配hello则添加回复
    if (currentText.includes("hello")) {
      const replayP = document.createElement("p");
      replayP.classList.add("replay");
      replayP.innerText = "Hi";
      texts.appendChild(replayP);
    }

    // 创建新段落用于下一次识别
    p = document.createElement("p");
    texts.appendChild(p);
  }
});

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

recognition.start();

修复说明 #

• 聚焦最新结果：通过e.results[e.results.length - 1]获取当前最新的识别条目，确保每个段落只显示当前识别的内容，不会混入历史文本
• 优化DOM操作：初始段落一次性添加到DOM，后续仅更新文本，减少不必要的DOM操作
• 修正判断逻辑：用最新结果的isFinal状态判断识别是否完成，而非最早的结果，逻辑更准确

内容的提问来源于stack exchange，提问作者Yusuf Irwin