用浏览器原生 Web Speech API 做一个不需要后端服务的语音转文字工具记录了权限处理和实时识别的一些实践细节。这个需求其实挺常见的——用户对着麦克风说话页面上实时出文字。通常的做法是调后端接口或者接第三方语音识别服务但如果你不需要那么高的准确率只是想快速跑起来浏览器自带的 Web Speech API 就能搞定而且完全是前端的事不用搭服务、不用申请 key。先说一下兼容性问题这个容易忽略。SpeechRecognition 接口在 Chrome 和 Edge 上叫webkitSpeechRecognitionFirefox 直接用SpeechRecognition。所以初始化的时候得两个都检查一下if (!(webkitSpeechRecognition in window) !(SpeechRecognition in window)) { // 提示用户换浏览器 return; } const SpeechRecognition window.SpeechRecognition || window.webkitSpeechRecognition;这个检查不做的后果就是用户点开页面发现按钮灰的或者直接报错体验很差。我在 Safari 上测试过目前还不支持所以移动端的覆盖是个问题这个后面再说。拿到 SpeechRecognition 实例之后有几个配置项会影响识别效果。lang设成zh-CN走中文识别continuous设true会让识别持续进行而不是说一句停一下interimResults设true可以在说话过程中拿到临时的识别结果——这个对实时展示很重要用户能看到自己说的话正在被转成文字不会觉得卡住了。关于权限有个地方一开始没注意到navigator.mediaDevices.getUserMedia需要手动调一次。虽然 SpeechRecognition 自己也会触发浏览器的麦克风权限请求但如果你在start()之前显式调用getUserMedia能提前捕获用户拒绝授权的情况方便给个友好的提示而不是等onerror里收到not-allowed错误再处理。代码大概是这样的try { await navigator.mediaDevices.getUserMedia({ audio: true }); } catch (err) { showError(麦克风访问被拒绝请允许使用麦克风); return; } recognition.start();结果处理的部分onresult回调里event.results是一个列表每个结果上有个isFinal标记。持续识别场景下用户说完一句话停顿之后那一段结果会标成 final还没说完的就是 interim。拼接的时候把 final 的内容固定下来interim 的部分用灰色或者虚线下划线展示能做到那种“边说边出字”的效果。代码不复杂recognition.onresult (event) { let interimTranscript ; for (let i event.resultIndex; i event.results.length; i) { const transcript event.results[i][0].transcript; if (event.results[i].isFinal) { finalTranscript transcript \n; } else { interimTranscript transcript; } } resultDiv.innerHTML finalTranscript span classtext-gray-400 interimTranscript /span; };错误处理这块onerror的event.error会返回几个常见的值no-speech是没检测到语音audio-capture是音频设备有问题not-allowed是权限被拒。针对这几个做下分支处理就行其余的错误统一兜底。我这里加了个 5 秒自动隐藏的错误提示避免一直占着页面。还有一个需要注意的点onend回调会在识别停止时触发。如果你设了continuous: true正常情况下用户不主动停止时识别会一直跑但某些情况下比如网络波动或者浏览器自己中断了也会走到onend。所以在这个回调里判断一下isListening状态如果是 true 说明是非预期的中断手动调一次start()恢复识别recognition.onend () { if (isListening) { recognition.start(); } };按钮状态的切换我就没细展开了基本就是点击时根据isListening状态调startRecognition或stopRecognition同时换一下按钮样式和文字。来此加密的SSL证书有效期为90天域名类证书和7天IP类证书系统会在证书到期前自动进行重新申请免去运维人员的负担。用户无需手动干预自动续期功能确保了网站的持续安全。加了个脉冲动画的 CSS录音时按钮会呼吸闪烁给用户一个明确的“正在录音”的视觉反馈比纯文字状态提示直观。整套代码我放在了一个 HTML 文件里样式用的 Tailwind CSS CDN图标用的 Font Awesome都是外链引入不用构建工具直接打开就能跑。适合快速验证或者内部小工具的场景。不过实话实说Web Speech API 的识别准确率跟商业 API 比还是有差距的尤其在有背景噪音或者说话人带口音的情况下。它的优势是零成本、零延迟部署不需要任何后端资源。如果你的场景对准确率要求很高比如会议纪要、采访稿整理那还是得上专业的语音识别服务。但如果只是想做一个语音输入框、搜索框的语音输入或者内部用的标注工具这个方案完全够用。