17370845950

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

JavaScript 通过 Web Speech API 实现语音识别，核心是 SpeechRecognition 接口（目前仅 Chrome、Edge 等基于 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：负责「说」—— 将文本转为语音朗读（支持多语言、语速、音调调节）

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

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

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

• 必须在安全上下文（HTTPS 或 localhost）中运行，HTTP 站点会静默失败
• 首次使用会弹出麦克风权限请求，用户拒绝后需手动开启（浏览器地址栏右侧图标）
• Chrome 中若页面被后台标签页暂停，识别可能中断；建议添加 end 和 error 事件监听并做重试提示
• 中文识别效果依赖系统语言包，推荐显式设置 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()，避免干扰用户或触发浏览器拦截。