浏览器原生不支持HTML元素直接通过speech属性启用语音识别，必须使用JavaScript的SpeechRecognition API手动实现；input和textarea需绑定onresult事件并将transcript写入value，且受限于HTTPS、权限、浏览器兼容性等硬性条件。
浏览器原生支持语音输入，但不是所有 HTML 元素都能直接开启语音识别 —— input 和 textarea 必须配合 JavaScript 的 SpeechRecognition（或 webkitSpeechRecognition）才能实现转文字，HTML 本身没有 speech="true" 这类属性。
为什么 input 加 speech 属性没反应
早期 Chromium 曾实验性支持 input type="text" x-webkit-speech，但该属性早在 2017 年就被移除，现在所有主流浏览器（Chrome、Edge、Firefox、Safari）都不识别它。试图写 <input speech> 或 <input x-webkit-speech> 不会报错，但也不会触发任何语音功能 —— 它只是个被忽略的无效属性。
真正起作用的是 JavaScript 接口：SpeechRecognition，它和表单控件是解耦的：你得手动把识别出的文本塞进 input 或 textarea 的 value 里。
怎么用 webkitSpeechRecognition 绑定到 textarea
核心是监听 onresult 事件，并把结果写入目标元素。注意必须在用户交互（如点击按钮）后首次调用 start()，否则会被浏览器静默拒绝（尤其在非 HTTPS 环境或 iOS Safari 中）。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 先检测接口是否存在：
'webkitSpeechRecognition' in window || 'SpeechRecognition' in window - 创建实例时要兼容前缀：
const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition; -
interimresults: true才能拿到实时流式文本（比如边说“今天天气”边显示），否则只在说完停顿后返回最终结果 - 处理
event.results要小心：它是个类似数组的对象，每个event.results[i]是一个SpeechRecognitionResult，而result[0].transcript才是识别出的字符串
简短示例：
const textarea = document.getElementById('my-textarea');
const btn = document.getElementById('voice-btn');
<p>const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new Recognition();</p><p>recognition.lang = 'zh-cn';
recognition.interimresults = true;
recognition.continuous = false; // 单次识别，说完自动停</p><p>recognition.onresult = (event) => {
const result = event.results[event.results.length - 1][0].transcript;
if (event.results[event.results.length - 1].isFinal) {
textarea.value += result + ' ';
} else {
textarea.value = textarea.value.replace(/[^]*$/, result); // 只更新最后一段临时文本
}
};</p><p>btn.addEventListener('click', () => recognition.start());常见错误和兼容性坑点
这些不是“配置不对”，而是直接导致功能完全失效的硬性限制：
-
SpeechRecognition在 HTTP 环境下彻底不可用（Chrome 120+ 强制要求 HTTPS 或localhost） - iOS Safari 完全不支持该 API（截至 2026 年 5 月仍无计划支持）
- Firefox 支持
SpeechRecognition，但默认禁用；需手动在about:config中启用media.webspeech.recognition.enable - 用户第一次使用时，浏览器会弹麦克风权限提示；如果用户点“禁止”，后续调用
start()会触发onerror且event.error === 'not-allowed'，不会重试 -
continuous: true时，若用户长时间沉默，Chrome 会在约 15 秒后自动onend，需手动再调start()才能继续
最常被忽略的一点：语音识别不是“开个开关就一直工作”的服务，它依赖用户显式授权、HTTPS 上下文、以及每次识别都由 JS 主动触发 —— 没有后台常驻、没有自动唤醒词、也没有跨页面持久化状态。想做成“随时可说”，得自己管理按钮状态、重连逻辑和错误恢复。
