HTML中如何使用SpeechRecognition实现语音转文字-html教程-PHP中文网

speechrecognition 在 html 中无法直接使用的核心难点是浏览器权限、安全上下文和用户手势触发限制；需兼容构造函数、确保 https/localhost、仅在 click 等同步事件中调用 start()，并正确遍历 event.results 处理 isfinal 结果。

html中如何使用speechrecognition实现语音转文字

直接用 SpeechRecognition 在 HTML 中做语音转文字，核心难点不在写代码，而在绕过浏览器的权限、上下文和触发限制——90% 的“没反应”问题都出在这三处，不是 API 本身坏了。

因为不是所有浏览器都原生支持 SpeechRecognition，而且部分版本只认带前缀的构造函数。

必须做兼容性兜底：const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
如果 Recognition 是 undefined，说明当前环境不支持（比如 Safari 桌面版至今未实现，iOS Safari 仅有限支持）
检查是否在安全上下文运行：http:// 域名（非 localhost 或 https://）会直接禁用该 API，控制台可能无提示，但 new Recognition() 会静默失败

这是最典型的卡点。浏览器明确禁止自动启动语音识别，哪怕只是页面加载完立刻调用 start() 也不行。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

必须由用户手势触发：只能绑定在 click、touchend 等同步事件里，不能放在 setTimeout 或异步回调中
首次调用 start() 会弹麦克风授权框；若用户点了“禁止”，后续所有 start() 都会触发 onerror 事件，错误类型是 not-allowed
移动端 Chrome 对连续识别更敏感，continuous: true 时若中间断开（如切后台），可能不会自动恢复，需手动监听 onend 并补 start()

event.results 是个类数组对象，结构嵌套深，且临时结果（isFinal: false）和最终结果（isFinal: true）混在一起，直接取 result[0].transcript 容易丢字或重复。

每次 onresult 触发，都要遍历 event.results 全部项：Array.from(event.results).forEach(...)
对每一项中的每个 SpeechRecognitionAlternative（即 result[i]），检查 isFinal 属性再决定是否追加到最终文本

示例逻辑片段：

recognition.onresult = (event) => {
  let finalTranscript = '';
  for (let i = event.resultIndex; i

这两个配置项看着简单，但设错会导致识别质量断崖式下降或 UI 行为异常。

lang 必须严格匹配 BCP 47 标准：中文用 'zh-CN'（注意大小写和短横），写成 'zh-cn' 或 'zh' 在部分 Edge 版本下会降级为英文识别
interimresults: true 才能拿到实时流式文本；设为 false 则只在一句话说完后返回一次结果，体验像“等录音结束才出字”
continuous: true 和 interimresults: true 通常要一起开，否则连续说话时中间停顿会触发 onend，识别器自动关闭