首页 > 文章 > 前端

WebSpeechAPI语音识别实现教程

时间：2025-12-20 09:40:40 294浏览收藏

推广推荐

支持 PC / 移动端，安全直达

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《WebSpeechAPI实现语音识别教程》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

首先检查浏览器是否支持Web Speech API，接着创建SpeechRecognition实例并配置语言、连续识别等参数，通过监听onresult事件获取语音转文字结果，结合start()和onend事件实现持续识别，注意需在HTTPS环境下运行并获取麦克风权限，适用于Chrome和Edge等主流浏览器。

JavaScript语音识别_WebSpeechAPI应用

Web Speech API 提供了浏览器端的语音识别功能，让开发者可以轻松集成语音输入能力到网页应用中。其中，SpeechRecognition 接口是实现语音转文字的核心。下面介绍如何使用 JavaScript 和 Web Speech API 实现基本的语音识别功能。

启用语音识别的基本步骤

要使用 Web Speech API 的语音识别功能，需创建一个 SpeechRecognition 实例（在部分浏览器中为 webkitSpeechRecognition），并配置相关事件回调。

检查浏览器是否支持 SpeechRecognition
创建识别实例，并设置连续识别和是否返回中间结果
监听 onresult 事件获取识别文本
通过 start() 启动识别，stop() 停止识别

示例代码：

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

// 连续识别模式
recognition.continuous = true;

// 返回中间结果（比如正在识别中的文字）
recognition.interimResults = true;

// 设置语言
recognition.lang = 'zh-CN';

recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');

  console.log('识别结果：', transcript);
};

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

// 开始识别
recognition.start();

常见配置与事件说明

通过设置不同的属性和监听事件，可以控制识别行为并处理各种状态。

continuous：设为 true 时持续监听，直到手动停止
interimResults：true 表示返回中间结果，可用于实时显示“正在听写”效果
lang：指定识别语言，如 'zh-CN' 中文，'en-US' 英文
onstart：识别开始时触发
onend：识别结束时触发，可在此重新启动
onerror：发生错误时调用，例如无权限或网络问题

实用技巧：可在 onend 中自动重启识别，实现持续监听效果：

recognition.onend = () => {
  console.log('识别已结束，尝试重启');
  recognition.start(); // 持续监听
};

权限与兼容性注意事项

语音识别依赖麦克风访问权限，且目前主要在基于 Chromium 的浏览器中支持较好。

必须在 HTTPS 环境下运行（本地开发时 localhost 例外）
首次使用会提示用户授权麦克风
Chrome、Edge 支持良好；Safari 部分支持；Firefox 不支持 SpeechRecognition
移动端 Android Chrome 支持，iOS Safari 支持有限

可通过判断全局对象是否存在来检测支持情况：

if (!('SpeechRecognition' in window) && !('webkitSpeechRecognition' in window)) {
  alert('当前浏览器不支持语音识别，请使用 Chrome 或 Edge');
}

实际应用场景举例

语音识别可用于搜索框输入、语音指令控制、语音笔记记录等场景。

例如，为输入框添加语音按钮：

document.getElementById('voice-btn').onclick = () => {
  recognition.start();
};

recognition.onresult = (event) => {
  const spokenText = event.results[0][0].transcript;
  document.getElementById('input-field').value = spokenText;
};

基本上就这些。只要注意权限、协议和浏览器兼容性，Web Speech API 能快速实现可用的语音输入功能。

好了，本文到此结束，带大家了解了《WebSpeechAPI语音识别实现教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

语音识别