SpeechRecognition API是浏览器原生JavaScript接口，非HTML标签功能；仅Chromium系浏览器稳定支持，需HTTPS/localhost环境、用户手势触发、权限授权，并注意降级与兼容处理。
HTML 本身不提供语音输入能力，SpeechRecognition API 是浏览器原生支持的 JavaScript 接口，不是 HTML 标签功能。直接在 <input> 上加属性或写个 speech 属性不会生效 —— 那是过时的、已被移除的 WebKit 实验性属性（如 webkitSpeechInput），现代浏览器早已不认。
怎么用 SpeechRecognition 实现语音转文本
核心是调用浏览器的 Web Speech API，它目前仅在 Chromium 内核浏览器（Chrome、Edge、新版 Opera）中稳定可用，Firefox 和 Safari 均不支持（Safari 完全未实现，Firefox 仅实验性支持且默认禁用）。
实操建议：
- 先检测全局是否存在
window.SpeechRecognition或其带前缀变体window.webkitSpeechRecognition，不存在就降级为普通输入 - 创建识别实例后，必须显式调用
recognition.start()才开始监听，不能靠点击自动触发（部分浏览器会因权限策略静默失败） - 设置
recognition.continuous = true可持续识别，但需手动控制recognition.stop()，否则可能长时间占用麦克风 -
recognition.interimResults = true开启后，会返回中间结果（带下划线的未确认文本），适合实时反馈；设为false则只返回最终确认结果
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN';
recognition.interimResults = true;
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
document.getElementById('my-input').value = transcript;
};
recognition.onerror = (event) => {
console.error('语音识别出错：', event.error);
};
为什么点一下没反应？常见权限与触发问题
用户点击后无响应，大概率不是代码写错了，而是被浏览器拦截了。
立即学习“前端免费学习笔记（深入）”；
关键限制：
- 必须在安全上下文（
https://或localhost）中运行，http://非本地域名直接拒绝初始化SpeechRecognition - 首次使用会弹出麦克风权限请求，若用户点“禁止”或之前已拒绝，后续调用
start()会静默失败，onerror中抛出not-allowed - 移动端 Chrome 对自动启动有限制：不能在页面加载完立刻调用
start()，必须由用户手势（如click、touchend）触发 - 部分企业网络或浏览器插件（如广告屏蔽器）会主动禁用
Web Speech API，此时SpeechRecognition构造函数会返回undefined
SpeechRecognition 的中文识别效果和替代方案
Chrome 默认中文识别尚可，但对口音、语速、专业术语、长句断句仍不稳定。识别结果不带标点，也不自动纠错，需要后端 NLP 补充处理。
如果你需要更高准确率或跨浏览器支持：
- 不要依赖前端纯 JS 方案，改用 WebRTC 录音 + 后端 ASR（如阿里云智能语音交互、腾讯云语音识别、Azure Speech SDK）
- 避免在表单提交前才识别，应边说边传音频流，减少延迟和超时风险
- 移动端慎用：iOS Safari 完全不支持，Android Chrome 在部分定制 ROM（如华为 EMUI）上可能因系统级麦克风管理导致
start()报aborted
真正难的不是写几行 recognition.start()，而是处理权限拒绝后的 UI 引导、降级方案、移动端兼容兜底，以及识别失败时不让用户觉得“功能坏了”。这些细节不写进文档，但线上一跑全暴露。
