javascript如何实现语音识别_Web Speech API有哪些功能-js教程-PHP中文网

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

幻影之瞳

发布： 2025-12-16 07:45:11

原创

566人浏览过

JavaScript语音识别依赖Web Speech API的SpeechRecognition接口，仅Chrome/Edge等Blink内核浏览器支持，需HTTPS环境、用户手势触发，可实现本地实时语音转文字，但存在兼容性、精度和移动端限制。

javascript如何实现语音识别_web speech api有哪些功能

JavaScript 实现语音识别主要依靠浏览器原生支持的 Web Speech API，其中核心接口是 SpeechRecognition（部分浏览器仍需前缀，如 webkitSpeechRecognition）。它无需后端服务即可在兼容浏览器中完成实时语音转文字，但目前仅在 Chrome、Edge（基于 Chromium）等 Blink 内核浏览器中稳定可用，Firefox 和 Safari 尚未支持语音识别功能。

语音识别基本实现步骤

要让网页“听懂”用户说话，关键在于创建并配置识别实例、监听事件、启动识别：

检测浏览器是否支持：typeof window.SpeechRecognition !== 'undefined' || typeof window.webkitSpeechRecognition !== 'undefined'
获取识别构造函数（优先用标准名，降级到 webkit 前缀）
创建实例后设置属性：如 recognition.continuous = false（单次识别）、recognition.interimResults = true（返回中间结果）
监听关键事件：onresult（获取识别文本）、onstart（开始收音）、onend（自动停止后触发，可在此处重新 start 实现连续识别）
调用 recognition.start() 启动，需用户手势（如点击按钮）触发，不能自动启动

Web Speech API 的两大核心功能模块

Web Speech API 实际包含两个独立但常配合使用的接口：

SpeechRecognition：负责语音识别（speech-to-text），将麦克风输入实时转为文本。支持语言设定（recognition.lang = 'zh-CN'）、结果置信度（event.results[i][0].confidence）、以及是否返回中间结果
SpeechSynthesis：负责语音合成（text-to-speech），把文字“读出来”。通过 window.speechSynthesis 调用，可选择发音引擎（voice）、调节语速（rate）、音高（pitch）、音量（volume）等

二者互不依赖，可单独使用。例如：只用 SpeechSynthesis 做朗读提示；或只用 SpeechRecognition 做语音指令控制。

立即学习“Java免费学习笔记（深入）”；

Inworld.ai

InWorldAI是一个AI角色开发平台，开发者可以创建具有自然语言、上下文意识和多模态的AI角色，并可以继承到游戏和实时媒体中

178

查看详情

常见限制与注意事项

Web Speech API 虽方便，但有明确的运行约束和兼容性现实：

必须在 HTTPS 或 localhost 环境下运行，HTTP 页面会被浏览器直接禁用麦克风权限
首次使用会弹出浏览器权限请求，用户拒绝后需手动在地址栏点击锁形图标开启
Chrome 对长时间识别有限制（约数秒无语音会自动结束），需监听 onend 并主动调用 start() 维持（注意避免无限循环）
中文识别效果尚可，但对口音、背景噪音、专业术语敏感，准确率不如云端 ASR 服务（如百度语音、阿里云智能语音）
移动端支持较弱，iOS Safari 完全不支持 SpeechRecognition，Android Chrome 支持但体验不稳定

一个最小可用示例（含错误处理）

以下代码片段可直接嵌入 HTML 测试（记得加按钮触发）：

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
  console.error('当前浏览器不支持语音识别');
} else {
  const recognition = new SpeechRecognition();
  recognition.lang = 'zh-CN';
  recognition.interimResults = true;

  recognition.onresult = (event) => {
    const transcript = Array.from(event.results)
      .map(result => result[0].transcript)
      .join('');
    console.log('识别结果：', transcript);
  };

  recognition.onerror = (event) => {
    console.warn('识别出错：', event.error);
  };

  recognition.onend = () => {
    console.log('识别已结束');
    // 如需连续识别，此处可加 recognition.start();
  };

  // 用户点击后启动
  document.getElementById('start-btn').onclick = () => recognition.start();
}

登录后复制

基本上就这些。Web Speech API 提供了轻量、免部署的语音交互入口，适合做演示、教育工具或简单语音指令场景。真要上生产、求稳定、要多语言/高精度，还是得对接专业语音云服务。但作为前端原生能力，它确实让“开口即用”变得更近了一步。

以上就是javascript如何实现语音识别_Web Speech API有哪些功能的详细内容，更多请关注php中文网其它相关文章！