javascript如何实现语音识别_Web Speech API有哪些功能?

16次阅读

javaScript 通过 Web Speech API 的 SpeechRecognition 接口实现语音识别,仅 Chromium 内核浏览器稳定支持,需 httpS 或 localhost 环境;核心步骤包括创建实例、设置 continuous/interimResults、监听 result 事件获取 transcript、调用 start() 启动;该 API 还含 SpeechSynthesis 实现文本转语音,两者均纯前端运行,但需注意权限、安全上下文及中文 lang 设置。

javascript如何实现语音识别_Web Speech API有哪些功能?

javascript 通过 Web Speech API 实现语音识别,核心是 SpeechRecognition 接口(目前仅 chromeedge 等基于 Chromium 的浏览器稳定支持,且需 https 或 localhost 环境)。

语音识别(SpeechRecognition)的基本用法

它允许网页将用户的实时语音转为文字。关键步骤包括创建实例、设置参数、监听事件、启动识别:

  • 使用 new (window.SpeechRecognition || window.webkitSpeechRecognition)() 创建识别器
  • 设置 recognition.continuous = true 支持连续识别;recognition.interimResults = true 返回中间结果(带下划线的暂定文本)
  • 监听 result 事件:每次识别到内容时触发,Event.results[i][0].transcript 是识别出的文字
  • 调用 recognition.start() 开始,recognition.stop()recognition.abort() 结束

Web Speech API 的两大核心功能

该 API 包含两个独立但互补的接口:

  • SpeechRecognition:负责「听」—— 将语音输入转为文本(客户端处理,不传服务器)
  • SpeechSynthesis:负责「说」—— 将文本转为语音朗读(支持多语言、语速、音调调节)

两者均无需后端服务,纯前端运行,但依赖浏览器实现和系统语音引擎。

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

实际使用中的关键注意事项

不是所有环境都能直接用,必须留意兼容性与权限问题:

  • 必须在安全上下文(HTTPS 或 localhost)中运行,HTTP 站点会静默失败
  • 首次使用会弹出麦克风权限请求,用户拒绝后需手动开启(浏览器地址栏右侧图标)
  • Chrome 中若页面被后台标签页暂停,识别可能中断;建议添加 endError 事件监听并做重试提示
  • 中文识别效果依赖系统语言包,推荐显式设置 recognition.lang = 'zh-CN'

一个最小可运行示例

只需几行代码即可测试识别是否生效:

const rec = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); rec.lang = 'zh-CN'; rec.onresult = e => {   const text = e.results[0][0].transcript;   console.log('识别结果:', text); }; rec.start(); // 点击按钮或用户操作后调用更稳妥

注意:请勿在页面加载即自动调用 start(),避免干扰用户或触发浏览器拦截。

text=ZqhQzanResources