Chrome/Edge原生支持语音输入，需input类型为text等且添加speech属性；Web Speech API需兼容构造函数、HTTPS环境及用户手势触发，iOS Safari和Android WebView不支持。
怎么让 <input> 支持语音输入（原生方案）
Chrome 和 Edge（基于 Chromium）支持原生语音输入，但不是所有 <input> 都能直接用 —— 必须满足两个条件：类型为 text、search、tel、url 或 email，且浏览器启用了语音识别（默认开启）。Safari 和 Firefox 不支持该特性。
实操建议：
- 加
speech属性即可触发麦克风图标：<input type="text" speech>（注意：HTML5 标准里已废弃该属性，但 Chrome 仍支持；更推荐用x-webkit-speech作为兼容写法） - 实际生效需用户主动点击麦克风图标，无法自动启动或编程触发（出于隐私限制）
- 语音识别结果会直接填入 input 值，不会触发额外事件，
input或change事件照常响应 - 不支持自定义语言模型，完全依赖系统级语音服务（如 Chrome 使用 Google Speech API）
SpeechRecognition API 怎么用才不报错
想控制语音流程？得用 Web Speech API 的 SpeechRecognition 接口。但它不是全平台可用：仅 Chromium 内核浏览器和部分新版 Edge 支持，且必须在 HTTPS 或 localhost 下运行，否则构造实例就会抛 ReferenceError: SpeechRecognition is not defined。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 页面加载后直接 new
SpeechRecognition()→ 报错，因为接口名因浏览器而异：webkitSpeechRecognition是 Chrome 实际暴露的构造函数 - 没处理
onend回调 → 识别中断后不重启，后续点击无效 - 没设
interimResults = true→ 只返回最终结果，实时听写体验差
最小可用示例：
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (SpeechRecognition) {
const recog = new SpeechRecognition();
recog.interimResults = true;
recog.onresult = (e) => {
const transcript = Array.from(e.results)
.map(r => r[0].transcript)
.join('');
document.getElementById('my-input').value = transcript;
};
recog.start(); // 需用户手势触发（如 click），不能 onload 自动调
}
移动端语音输入为什么点不动 / 没反应
在 iOS Safari 或 Android WebView 中，speech 属性基本失效，SpeechRecognition 更是完全不可用。这不是代码问题，是平台策略限制 —— Apple 未开放语音识别接口给网页，Android 原生 WebView 也默认禁用。
使用场景下可考虑的替代路径：
- Hybrid App 场景：通过桥接调用原生语音 SDK（如 iOS 的
SFSpeechRecognizer），再把文本传回网页 - PWA：即使加了 manifest，也无法绕过 Safari 的 Web Speech 封锁
- 降级方案：显示「请复制粘贴语音转文字结果」提示，引导用户用系统自带听写（长按输入框 → “听写”）
- 别依赖
navigator.mediaDevices.getUserMedia({ audio: true })模拟 —— 它只拿音频流，不带语音识别能力
语音输入后如何校验和防误触
语音识别错误率不低，尤其带口音、背景嘈杂时。直接把 event.results[0][0].transcript 当最终值上送，容易提交乱码或敏感词。
实操建议：
- 加
confidence判断：虽然不强制返回，但 Chromium 会在result.item(0).confidence提供置信度（0–1 浮点数），低于 0.6 建议标灰并提示“识别不确定” - 避免连续触发：调用
recognition.stop()后，等onend触发再允许下一次start()，否则可能堆积识别任务 - 防重复提交：语音结束到用户点击「确认」之间应有明确状态区分，不要监听
input就立刻提交表单 - 中文场景特别注意：同音字多（如“苹果” vs “评果”），建议配合后端 NLP 纠偏，前端只做基础长度/符号过滤
语音输入不是开关一开就完事的事，它高度依赖运行环境、用户权限、网络质量，还有意料之外的静音、截断、跨语言混说。最常被忽略的是：没检查 SpeechRecognition 是否存在就写逻辑，结果整块功能在 Safari 里彻底静音。
