如何为index.html添加语音输入支持：HTML5 Speech Input实战-html教程-PHP中文网

真正可用的只有 web speech api 的 speechrecognition 接口，仅 chrome 桌面版和部分 edge 支持，需运行时检测前缀、设置 lang 和 interimresults 等参数，并处理权限、状态机与降级。

如何为index.html添加语音输入支持：html5 speech input实战

不能直接用 speech-input 属性或 type="speech" 实现语音输入——这些早已被移除或从未成为标准。真正可用的只有 Web Speech API 的 SpeechRecognition 接口，且目前仅 Chrome 桌面版和 Edge（部分版本）稳定支持，Firefox 和 Safari 完全不支持。

如何检测并创建可用的 SpeechRecognition 实例

浏览器对 Web Speech API 的实现存在前缀差异，必须做运行时检测，不能硬写 new SpeechRecognition()。

先检查 window.SpeechRecognition 或 window.webkitSpeechRecognition 是否存在，二者取其一
创建实例后立即设置 lang，中文推荐用 'zh-CN'（'cmn-Hans-CN' 也可，但兼容性略差）
interimResults: true 才能拿到实时修正的中间文本（灰色字），否则只返回最终结果
continuous: false 更安全：避免识别停顿后自动重启导致麦克风持续采集

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
  console.warn('SpeechRecognition not supported');
  document.getElementById('micButton').disabled = true;
  return;
}
const recognition = new SpeechRecognition();
recognition.lang = 'zh-CN';
recognition.interimResults = true;
recognition.continuous = false;

为什么点击按钮后没反应？常见权限与状态问题

用户首次调用 recognition.start() 时，Chrome 会弹出麦克风权限请求。如果用户拒绝、或之前点过“不再询问”，后续调用将静默失败，且不会触发 onerror。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

错误现象：recognition.state 始终为 'inactive'，控制台无报错，但麦克风图标不亮
必须在用户手势（如 click、tap）中调用 start()，不能在页面加载后自动触发
监听 onend 事件时不要盲目 start() —— 权限被拒后反复调用只会卡死状态
可加一层判断：if (recognition.state === 'idle') recognition.start()

如何把识别结果正确填入搜索框并处理中断

onresult 事件返回的 event.results 是二维类数组，event.resultIndex 指向最新结果块，但每块内可能含多个候选（isFinal 标识是否最终结果）。

只取 event.results[event.resultIndex] 这一块，避免重复拼接旧结果
遍历该块内所有 SpeechRecognitionAlternative，用 isFinal 区分最终/临时文本
临时结果填入输入框时建议加标记（如末尾加 …），避免用户误提交
识别中途点击停止按钮，需手动清空 input.value 或保留已确认内容，视交互逻辑而定

recognition.onresult = event => {
  const result = event.results[event.resultIndex][0];
  const input = document.getElementById('searchInput');
  if (result.isFinal) {
    input.value = result.transcript;
  } else {
    input.value = result.transcript + '…';
  }
};

降级提示和按钮状态反馈不能省

不支持 Web Speech API 的浏览器占比仍高（Safari 全系、Firefox 全系、所有国产双核浏览器的 IE 内核模式），且移动端 Chrome 对该 API 支持不稳定。

按钮文字应动态切换：「? 语音」→ 「? 正在听」→ 「✅ 已填入」，禁用状态要视觉明确
监听 onsoundstart/onsoundend 可更新按钮图标，但注意这些事件非标准，仅 Chrome 支持
权限被拒后，建议显示一行小字提示：请在地址栏点击锁形图标 → 网站设置 → 启用麦克风
不要依赖 onerror 捕获权限问题——它通常不触发；靠 onend + state 判断更可靠

最易被忽略的是：语音识别不是“开箱即用”的功能，它本质是受控的媒体流采集，每一次 start() 都等同于一次 navigator.mediaDevices.getUserMedia({audio:true}) 调用。权限、上下文、状态机、降级路径，缺一不可。别把它当成一个开关，而要当作一个需要全程监护的异步设备。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！