Web Speech API 需用 JavaScript 调用 webkitSpeechRecognition（Chrome）实现语音输入，必须 HTTPS、用户手势触发、处理权限与异步流式结果，无标准跨浏览器替代方案。
怎么用 Web Speech API 实现语音输入
HTML 本身没有原生的 <input type="speech">，这个属性早被废弃了，现在必须靠 JavaScript 调用 SpeechRecognition（或 webkitSpeechRecognition）接口来实现。浏览器支持不统一，Chrome 最稳定，Firefox 和 Safari 基本不支持或只读模式。
- 必须走 HTTPS（本地
localhost除外），HTTP 页面会直接拒绝启动识别 -
SpeechRecognition不是标准全局对象，Chrome 下得用webkitSpeechRecognition - 用户第一次使用时会弹权限框，拒绝后需手动进设置开启“网站使用麦克风”
- 识别是异步的，不能当同步函数用，别在
onresult外面直接取结果
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'zh-CN';
recognition.interimResults = true;
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
console.log(transcript);
};
recognition.start(); // 必须显式调用
为什么点击按钮没反应，控制台也没报错
最常见的静默失败不是代码写错了，而是权限或环境卡住了。Chrome 里 webkitSpeechRecognition 启动失败不会抛异常，只会安静地不干活。
- 检查地址栏左上角有没有麦克风图标，点开看是否被禁用
- 打开
chrome://settings/content/microphone，确认当前域名没被屏蔽 - 用
recognition.onend打个日志，如果它立刻触发，说明识别器根本没起来（大概率权限或协议问题） - 别在页面加载完就自动
start()，必须由用户手势（如click、touchstart）触发，否则 Chrome 会忽略
如何把语音识别结果填进 input 或 textarea
这不是绑定事件那么简单——语音识别是流式返回的，interimResults: true 时中间结果会反复覆盖，得自己做合并逻辑。
-
event.results是SpeechRecognitionResultList，每项是SpeechRecognitionResult，最后一条才是最终结果（result.isFinal === true） - 别直接
input.value = transcript，要等isFinal为true再赋值，否则用户看到文字乱跳 - 如果想支持“边说边显示草稿”，用一个
<span></span>显示interim结果，主input只更新最终版 - 移动端注意：iOS Safari 完全不支持该 API，Android Chrome 可用但偶尔掉权限
有没有更轻量、兼容性更好的替代方案
没有标准替代品。第三方 SDK（比如 Web Speech API 封装库）本质还是调同一套接口，只是加了降级提示；录音 + 后端 ASR（如阿里云语音识别）能跨浏览器，但要处理音频上传、鉴权、延迟，成本翻倍。
立即学习“前端免费学习笔记（深入）”；
- 纯前端方案里，目前只有 Chrome + HTTPS + 用户授权这一条路走得通
- 别信 npm 上叫
speech-input或html-speech的包，多数只是封装了webkitSpeechRecognition加了个 fallback 提示 - 如果产品必须支持多浏览器，建议降级为“点击说话 → 录音 → 上传 → 返回文字”，别硬扛 Web Speech
onend 是因为网络抖动触发的。留好 onerror 和 onnomatch 的兜底日志，比写业务逻辑还重要。 
