0

0

javascript语音识别如何集成_web speech api有哪些应用场景【教程】

夜晨

夜晨

发布时间:2026-01-28 13:25:51

|

938人浏览过

|

来源于php中文网

原创

Web Speech API 的 SpeechRecognition 在 iOS Safari 中完全不支持、Android Chrome 部分版本默认禁用,且仅 HTTPS 或 localhost 下可用;需用 window.SpeechRecognition || window.webkitSpeechRecognition 兼容写法,并在用户手势中调用 start(),设置 interimResults 和 lang 才能正常识别。

javascript语音识别如何集成_web speech api有哪些应用场景【教程】

Web Speech API 的 SpeechRecognition 在大多数现代桌面浏览器中可用,但**在 iOS Safari 和 Android Chrome(部分版本)上默认禁用或完全不支持**——这不是代码写错的问题,而是权限与平台限制导致的“调用即失败”。

SpeechRecognition 构造函数报错:ReferenceError: SpeechRecognition is not defined

这是最常见拦路虎。Chrome 仅在 HTTPS 或 localhost 下启用该 API;Safari(所有 iOS/iPadOS 版本)至今未实现 SpeechRecognition;Edge 基于 Chromium 后已支持,但需确认版本 ≥ 79。

  • 检查运行环境:typeof SpeechRecognition !== 'undefined' 必须为 true,否则直接降级(如改用按钮输入)
  • 不要依赖 window.SpeechRecognition —— 应使用带前缀的兼容写法:window.SpeechRecognition || window.webkitSpeechRecognition
  • 若部署在 HTTP 非本地环境,必须切到 HTTPS,否则 new SpeechRecognition() 会静默失败或抛出 TypeError

start() 调用后无响应,onresult 从不触发

不是代码漏了事件监听,而是麦克风权限未获取、用户拒绝、或识别服务未就绪。Web Speech API 不会自动弹出权限框,start() 调用本身才会触发。

  • 确保在用户手势(如 clicktouchend)回调中调用 recognition.start(),否则 Chrome 会静默拒绝
  • 监听 onaudioendonend:如果快速触发 start()stop(),可能因音频流未释放导致后续调用失效
  • recognition.interimResults = true 必须显式设置,否则只返回最终结果(event.results[0][0].transcript),中间语音不会上报

识别准确率低、中文支持差、响应延迟高

Web Speech API 调用的是设备所在区域的 Google 语音识别后端,语言模型和网络质量直接影响效果。它不提供模型切换或自定义词典能力。

LibLibAI
LibLibAI

国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达。

下载

立即学习Java免费学习笔记(深入)”;

  • recognition.lang = 'zh-CN' 必须设对,且浏览器语言设置最好也匹配,否则可能 fallback 到英文模型
  • 避免长句连续识别:单次 start() 最好控制在 30 秒内,超时后 onend 触发,需手动重 start()
  • 没有离线模式:所有音频上传至远程服务,国内用户可能因网络抖动出现明显延迟或中断,无法用于实时字幕类强时效场景

替代方案:什么情况下不该硬扛 Web Speech API

当你的场景要求 iOS 兼容、离线运行、低延迟反馈、或需要自定义热词(如医疗术语、产品型号),Web Speech API 就不是解法,而是障碍。

  • iOS 用户占比高?立刻放弃,改用点击输入 + 拼音模糊搜索,或接入第三方 SDK(如讯飞 Web SDK,需申请 key 且有调用配额)
  • 需要识别固定指令(如“打开灯光”“播放第三首”)?用 match + 关键词白名单比依赖语音识别更稳
  • 要支持断句、标点、说话人分离?Web Speech API 不提供这些字段,event.results[i][j].confidence 也不可靠,别浪费时间解析

真正棘手的不是怎么写那几行 new SpeechRecognition(),而是如何在用户点下按钮的 200ms 内,判断该走语音路径、键盘路径,还是直接提示“暂不支持”。兼容性检测、降级策略、用户提示文案,这些才占掉 80% 的实际工作量。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

830

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

743

2023.11.06

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

1412

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

381

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

937

2025.04.24

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

5365

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

3083

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

526

2025.12.25

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

84

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号