Chrome下Speech Recognition移动端重复输出问题求助

问题原因 #

移动版Chrome的Speech Recognition API行为和桌面端存在差异：

• 会多次触发onresult事件，即使是同一轮识别的最终结果
• event.results数组可能包含之前已处理过的结果，原代码未做去重处理
• 每次onresult都直接累加所有isFinal结果并插入，导致重复输出

修复方案 #

1. 新增已处理索引跟踪 #

添加变量记录已处理完成的结果索引，避免重复处理同一结果项。

2. 优化结果处理逻辑 #

只处理未被处理过的结果，且仅当结果为isFinal时才插入到textarea，避免中间临时结果的干扰。

3. 调整插入文本的时机 #

确保只有当完整的最终结果确认后，才执行插入操作，避免多次触发导致的重复添加。

修改后的完整代码 #

// 新增变量跟踪已处理的结果索引
let processedResultIndex = 0;

speechRecognition.onresult = (event) => {
  let teks_transkrip = "";
  let transkrip_akhir = "";

  // 只处理从processedResultIndex开始的新结果
  for (let i = processedResultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
      transkrip_akhir += event.results[i][0].transcript;
      // 更新已处理索引，标记该结果已处理
      processedResultIndex = i + 1;
    } else {
      teks_transkrip += event.results[i][0].transcript;
      $("#pratinjau").val(teks_transkrip);
    }
  }

  // 只有当有新的final结果时才插入
  if (transkrip_akhir.trim()) {
    $("#artikel").insertIntoTextArea(transkrip_akhir);
  }
};

// 可选：如果需要连续识别，在onend时重启（避免移动设备自动停止）
speechRecognition.onend = () => {
  // 可根据需求设置状态变量控制是否重启
  // speechRecognition.start();
};

$.fn.insertIntoTextArea = function(textToInsert) {
  const data = $("#artikel").val();
  const trimmedText = textToInsert.trim();

  switch(trimmedText) {
    case "titik":
      $("#artikel").val(data + ".");
      break;
    case "baris baru":
      $("#artikel").val(data + "\n");
      break;
    case "paragraf baru":
      $("#artikel").val(data + "\n\n");
      break;
    case "titik koma":
      $("#artikel").val(data + ";");
      break;
    case "koma":
      $("#artikel").val(data + ",");
      break;
    default:
      $("#artikel").val(data + textToInsert);
  }
};

关键改动说明 #

• processedResultIndex：记录已处理的结果索引，每次循环只处理新结果项，避免重复累加。
• 仅当transkrip_akhir不为空时执行插入操作，防止空内容触发不必要的更新。
• 将insertIntoTextArea中的多分支if改为switch，代码更简洁易维护。
• 可选的onend重启逻辑：移动设备语音识别可能在短时间无输入后自动停止，如需连续识别可添加此逻辑。

内容的提问来源于stack exchange，提问作者Gea Putri