如何从本地HTML文件搭建并使用W3C Web Speech API？

1. 本地HTML无法访问麦克风的解决办法 #

浏览器出于安全限制，file:// 协议（本地文件）属于非安全上下文，不允许访问麦克风等媒体设备。解决方式分两种场景：

• 桌面Chrome：搭建本地HTTP服务器，比如用Python执行 python -m http.server，或者用Node.js的http-server工具，把HTML文件放在服务器目录下，通过http://localhost:端口号访问，就能正常请求麦克风权限。
• 安卓WebView：需要做三步配置：
  • 在AndroidManifest.xml中添加麦克风权限：<uses-permission android:name="android.permission.RECORD_AUDIO" />
  • 开启WebView的媒体权限：在WebSettings里设置webSettings.setMediaPlaybackRequiresUserGesture(false);
  • 安卓6.0及以上系统，要动态申请RECORD_AUDIO权限，用户授权后才能使用麦克风。

2. Web Speech API 搭建说明 #

Web Speech API是浏览器原生支持的API，不需要安装任何额外文件，直接在HTML中写JavaScript调用即可。实现连续语音识别的核心步骤：

• 先检查浏览器支持：判断'webkitSpeechRecognition' in window（目前主流浏览器都带webkit前缀）
• 创建识别实例：const recognition = new webkitSpeechRecognition();
• 开启连续识别：设置recognition.continuous = true;，同时recognition.interimResults = true可以实时获取未确定的识别结果
• 绑定事件监听：
  • onresult：处理识别返回的文本结果
  • onend：识别结束时自动重启（实现连续识别）
  • onerror：捕获识别过程中的错误
• 启动识别：调用recognition.start();

简单示例代码：

<!DOCTYPE html>
<html>
<body>
  <p>正在监听语音：</p>
  <div id="output"></div>
  <script>
    if ('webkitSpeechRecognition' in window) {
      const recognition = new webkitSpeechRecognition();
      recognition.continuous = true;
      recognition.interimResults = true;
      recognition.lang = 'zh-CN'; // 设置识别语言

      const output = document.getElementById('output');

      recognition.onresult = (e) => {
        let fullText = '';
        for (let i = e.resultIndex; i < e.results.length; i++) {
          fullText += e.results[i][0].transcript;
        }
        output.textContent = fullText;
      };

      recognition.onend = () => {
        // 自动重启实现连续监听
        recognition.start();
      };

      recognition.onerror = (err) => {
        console.log('识别出错:', err.error);
      };

      recognition.start();
    } else {
      alert('当前环境不支持Web Speech语音识别');
    }
  </script>
</body>
</html>

3. 语音识别服务是否付费 #

目前浏览器原生调用的Web Speech API（比如Chrome用的谷歌识别服务），个人非商业使用完全免费，但存在未公开的调用频率、单次时长限制，普通使用场景下足够。如果是商业大规模部署、需要更高的并发量或定制化功能，建议使用对应的云服务API（如谷歌Cloud Speech-to-Text、Azure Speech Service），这类服务是按调用量收费的。

内容的提问来源于stack exchange，提问作者Mr Chan