HTML5 Web Speech API在本地及托管服务器无法运行的求助
2026-5-14
嘿，我来帮你捋捋这个有点反常识的问题——毕竟你这情况和大家常遇到的刚好相反，确实挺让人懵的。咱们从代码bug和API的环境限制两方面来拆解：
1. 先搞定代码里的低级错误
你的代码里有个明显的语法问题，这绝对是服务器环境下运行失败的关键原因之一：
看这行alert(event. Hi[0][0].transcript);，这里有两个离谱的错误：
event后面多了个空格，而且属性名完全写错了，应该是event.results而非event. Hi- 要获取语音识别结果，得用官方规定的
results属性，不是你随手写的Hi
修复后的完整代码是这样的：
<html> <head> <title>Voice API</title> </head> <body> <button onClick="func()">Click Me</button> <script> function func() { alert('Hello'); var recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.onresult = function(event) { alert(event.results[0][0].transcript); } recognition.start(); } </script> </body> </html>
2. 为啥本地打开文件能跑，服务器不行？
这就得说到Web Speech API的安全规则了：
- 早期部分浏览器允许
file://协议（就是你直接双击打开本地文件的方式）调用这个API，可能你的浏览器版本比较旧，还保留着这个兼容； - 而服务器环境（不管是本地的
http://localhost还是线上托管服务器），现代浏览器要求必须在HTTPS协议下才能使用Web Speech API——哪怕是本地服务器，现在Chrome等新版本浏览器也开始限制HTTP环境调用该API了，直接会禁用功能。
3. 服务器环境的解决办法
- 本地服务器：给它配置HTTPS，比如用Node.js的
https模块搭建服务，或者给Nginx配置自签名SSL证书（本地测试用自签名就行，浏览器弹出安全提示忽略即可）； - 线上服务器：确保你的网站启用了HTTPS，现在大部分托管平台都提供免费的SSL证书（比如Let's Encrypt），直接申请配置就能用；
- 兼容性优化：
webkitSpeechRecognition是webkit内核浏览器的专属前缀，为了兼容更多浏览器，可以改成这样：
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
先把代码的语法错误修好，再把服务器环境换成HTTPS，你的语音识别功能应该就能正常工作啦。
内容的提问来源于stack exchange，提问作者poedgar
