JavaScript如何实现语音识别？

JavaScript实现语音识别主要依托浏览器原生的Web Speech API（尤其是SpeechRecognition接口），可在Chrome、Edge等Chromium内核浏览器中快速构建网页端实时语音转文字功能，无需后端或第三方SDK；但需谨慎处理兼容性检测（Safari完全不支持）、麦克风权限引导、事件驱动的结果解析及用户体验细节——看似简单，实则处处是坑；若需离线识别、多语言增强或高准确率，就得转向WebAssembly模型（如Vosk）或云服务方案。

JavaScript 实现语音识别主要依靠浏览器原生的 Web Speech API，特别是其中的 SpeechRecognition 接口（目前为 Chrome、Edge 等基于 Chromium 的浏览器支持较好，Firefox 有部分支持但需手动启用，Safari 尚未支持）。它无需后端、不依赖第三方 SDK，适合网页端实时语音转文字场景。

检查浏览器兼容性并初始化识别器

不是所有浏览器都支持，使用前必须检测并优雅降级：

• 用 window.SpeechRecognition || window.webkitSpeechRecognition 判断是否可用
• 若不可用，提示用户换浏览器或改用其他输入方式
• 创建实例时建议用 new (window.SpeechRecognition || window.webkitSpeechRecognition)()
• 设置关键属性：如 recognition.continuous = false（单次识别），recognition.interimResults = true（返回中间结果）

监听识别事件并处理文本结果

语音识别是异步事件驱动的，核心事件有：

• onstart：麦克风开启，可更新 UI 状态（如显示“正在听…”）
• onresult：收到识别结果，event.results 是 SpeechRecognitionResultList，每项含多个 SpeechRecognitionAlternative
• onend：识别结束（可能因超时、出错或用户停止），可在此自动重启识别（设 continuous = true 时需手动调用 recognition.start()）
• .onerror：捕获错误（如 no-speech、aborted、not-allowed），尤其注意权限被拒时要引导用户授权

示例提取最终文本：
const transcript = event.results[0][0].transcript;
const isFinal = event.results[0].isFinal;

请求麦克风权限与用户交互设计

首次调用 recognition.start() 会触发浏览器权限弹窗，但不能提前预判是否被拒绝：

• 避免自动启动识别，应由用户显式点击按钮触发（符合 Chrome 的 autoplay 和权限策略）
• 按钮文案建议明确，如“点击说话”，并实时反馈状态（禁用中 / 正在听 / 识别中 / 完成）
• 权限被拒后，onerror 中的 event.error === 'not-allowed' 可用于提示用户去地址栏手动开启麦克风
• 移动端需注意：部分 Android 浏览器要求 HTTPS，且某些 WebView 完全不支持

基础可用代码片段（可直接测试）

复制到 HTML 文件中，在 Chrome 中打开即可运行：

<button id="speakBtn">点击说话</button><br><div id="output"></div><br><br><script><br>const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;<br>if (!SpeechRecognition) {<br>  document.getElementById('speakBtn').disabled = true;<br>  document.getElementById('output').textContent = '您的浏览器不支持语音识别';<br>} else {<br>  const recognition = new SpeechRecognition();<br>  recognition.interimResults = true;<br>  recognition.lang = 'zh-CN'; // 设为中文<br><br>  recognition.onresult = (event) => {<br>    let interimTranscript = '';<br>    let finalTranscript = '';<br>    for (let i = 0; i < event.results.length; i++) {<br>      const transcript = event.results[i][0].transcript;<br>      if (event.results[i].isFinal) {<br>        finalTranscript += transcript;<br>      } else {<br>        interimTranscript += transcript;<br>      }<br>    }<br>    document.getElementById('output').innerHTML =<br>      `最终：${finalTranscript}<br>暂定：${interimTranscript}`;<br>  };<br><br>  document.getElementById('speakBtn').onclick = () => {<br>    recognition.start();<br>  };<br>}<br></script>

基本上就这些。不复杂但容易忽略权限、兼容性和用户体验细节。如需更稳定或支持离线/多语言/自定义词表，就得接入 WebAssembly 模型（如 Vosk）或调用云服务（阿里云智能语音、百度语音等），那就超出纯 JS 范畴了。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~