HTML 表单里怎么让 <input> 支持语音输入
浏览器原生支持，但得靠用户主动触发，不是自动开麦。核心是给 <input> 加 speech 属性（实际是 x-webkit-speech 的遗留写法），不过现在主流做法是用 Web Speech API 手动控制。
真正起作用的是 Chrome / Edge（基于 Chromium）对 inputmode="text" + 右侧语音按钮的内置支持，前提是：<input type="text"> 或 <input type="search">，且没被 disabled 或 readonly 挡住。
- 只在桌面版 Chrome/Edge 和 Android Chrome 有稳定语音图标（iOS Safari 完全不支持）
-
autocomplete="off"不影响语音按钮显示，但inputmode="none"会直接干掉它 - 语音识别结果会直接填入 input 值，触发
input和change事件，和手动输入行为一致
为什么加了 x-webkit-speech 没反应
这个属性早在 2017 年就被 Chrome 废弃，现在加了也没任何效果，控制台也不会报错——它只是静静失效。
如果你在旧代码或某些博客里看到 <input x-webkit-speech>，请立刻删掉。它既不触发语音，也不兼容，还可能误导后续维护者以为“功能已接入”。
立即学习“前端免费学习笔记（深入）”；
- 当前唯一可靠路径：依赖浏览器 UI 自动注入语音按钮（仅限部分 input 类型 + Chromium 内核）
- 想跨浏览器、跨设备可控地支持语音？必须上 Web Speech API，自己画按钮、调
SpeechRecognition - 注意：
SpeechRecognition是非标准接口，Chrome/Edge 可用，Firefox 用SpeechSynthesis只能读、不能听，Safari 全面不支持
Web Speech API 实现语音转文本的最小可行代码
别想着封装大而全的 SDK，先跑通识别流程。关键点不在语法，而在生命周期管理——识别实例不能复用，每次都要 new，且必须等 onstart 后才能放心让用户说话。
const rec = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
rec.continuous = false;
rec.interimResults = false;
rec.lang = 'zh-CN';
rec.onresult = (e) => {
const text = e.results[0][0].transcript;
document.getElementById('my-input').value = text;
};
rec.onerror = (e) => {
console.error('语音识别失败:', e.error);
};
// 真正启动前，确保用户已授权麦克风
document.getElementById('mic-btn').onclick = () => rec.start();
-
continuous: false很重要，设为true会导致识别不停，用户无法控制结束时机 - 必须监听
onend并在其中调用rec.start()才能实现“说完自动停、再点继续”，否则第二次调用start()会抛InvalidStateError - 移动端需在用户手势（如 click）中调用
start()，否则 iOS Chrome 会静默拒绝
表单提交时语音内容没同步到后端？检查这三点
语音填进去的值，和键盘敲出来的值在 DOM 里完全一样，但容易在以下环节丢：
- 用了 React/Vue 等框架？别直接改
input.value，要触发对应的数据绑定更新（比如 React 中应调用setState，而不是绕过它直接操作 DOM） - 表单用了
event.preventDefault()但忘了手动收集input.value？语音输入不会产生额外字段，它就老老实实存在你那个<input>的 value 里 - 后端接收时做了 trim 或正则清洗？中文语音识别偶尔带空格或顿号（如“北京、上海”），别用过于激进的过滤逻辑把有效标点干掉了
最常被忽略的一点：语音识别是异步完成的，如果用户点提交按钮比识别回调还快，那提交的就是空值。加个 loading 状态或禁用提交按钮直到 onresult 触发，比事后补救更可靠。
