iOS端8th Wall Web应用Web Speech Recognition.onresult问题求助

可能的原因 #

• Web Speech API的iOS版本/硬件差异：不同iPhone型号、iOS版本对Web Speech API的实现逻辑不同——旧设备或老系统可能在本地语音识别计算上存在性能瓶颈，若依赖云端识别则可能因硬件网络传输效率低导致延迟。
• 系统资源竞争：8th Wall的AR场景会占用大量系统资源，部分设备中音频捕获的优先级被压低，语音数据无法及时传递到识别服务，拖慢.onresult的触发。
• iOS WebKit的触发限制：部分iOS设备的WebKit内核需要等待音频输入完全停止（比如用户停说后数秒）才会触发.onresult，而非实时返回识别结果。
• 回调内操作阻塞：你在.onresult中执行的model.removeAttribute('animation-mixer')、SendMessage及DOM修改操作，在低性能设备上可能耗时较长，让你误以为是.onresult触发慢，实际是后续处理拖慢了反馈。

规避.onresult相关问题的方法 #

1. 优化语音识别配置 #

显式开启中间结果返回，避免等待最终识别结果，同时根据需求调整连续识别模式：

recognition.continuous = false; // 按需设置，连续识别场景设为true
recognition.interimResults = true; // 开启实时中间结果，提前获取识别内容

2. 分离耗时操作到异步队列 #

把非紧急的DOM修改、网络请求等操作从.onresult回调中剥离，避免阻塞事件触发后的响应：

recognition.onresult = function (event) {
  const transcript = event.results[0][0].transcript;
  console.log(transcript);
  
  // 用异步任务处理非核心逻辑
  setTimeout(() => {
    model.removeAttribute('animation-mixer');
    SendMessage(transcript);
    const speechBtn = document.getElementById('btn');
    speechBtn.style.background='#FFFFFF';
    speechBtn.style.color='#007AFF';
    speechBtn.textContent = ' ! ';
  }, 0);
};

3. 主动控制识别会话时长 #

设置静音超时，用户停止说话后主动结束识别会话，避免系统等待超时才触发.onresult：

let silenceTimeout;
recognition.onstart = function () {
  speechBtn.textContent = 'Listening...';
  console.log('Listening... Speak into the microphone.');
  model.setAttribute('animation-mixer', 'clip: visualization; loop: repeat;');
  
  // 重置静音超时
  clearTimeout(silenceTimeout);
  silenceTimeout = setTimeout(() => {
    recognition.stop();
  }, 3000); // 3秒无输入自动停止识别
};

recognition.onresult = function (event) {
  // 有结果时重置超时，继续监听
  clearTimeout(silenceTimeout);
  silenceTimeout = setTimeout(() => {
    recognition.stop();
  }, 3000);
  
  const transcript = event.results[0][0].transcript;
  console.log(transcript);
  // 后续异步处理逻辑...
};

4. 针对低性能设备降级处理 #

通过用户代理判断设备型号，对旧款iPhone设置更轻量化的识别参数：

const isLowEndDevice = /iPhone(6|7|8|SE(1st))/i.test(navigator.userAgent);
if (isLowEndDevice) {
  recognition.maxAlternatives = 1; // 只返回最优结果，减少计算量
  recognition.timeout = 5000; // 缩短识别超时时间
}

5. 调试定位真实延迟点 #

在.onresult开头添加高精度时间戳，对比不同设备上onstart到onresult的时间差，确认是识别本身慢还是后续处理慢：

recognition.onstart = function () {
  console.log('onstart触发时间:', performance.now());
  // 原有逻辑...
};

recognition.onresult = function (event) {
  console.log('onresult触发时间:', performance.now());
  // 原有逻辑...
};

同时监听错误和结束事件，排查是否有异常导致识别延迟：

recognition.onerror = function(event) {
  console.error('语音识别错误:', event.error);
};

recognition.onend = function() {
  console.log('识别会话结束');
};

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