html5使用speech recognition实现语音输入 html5使用语音识别API的指南-html教程-PHP中文网

html5使用speech recognition实现语音输入 html5使用语音识别API的指南

絕刀狂花

发布： 2025-10-26 20:58:01

原创

1032人浏览过

答案：HTML5通过Web Speech API的SpeechRecognition接口实现语音识别，适用于搜索、表单等场景。需创建识别实例，设置语言、连续识别等参数，绑定onresult、onerror、onend事件，调用start()启动识别。示例代码展示了在Chrome中集成语音输入框的方法。支持情况上，Chromium内核浏览器表现良好，需HTTPS或localhost运行，且需用户授权麦克风权限，移动端Android Chrome可用，iOS Safari不支持。

html5使用speech recognition实现语音输入 html5使用语音识别api的指南

HTML5 的语音识别功能通过 Web Speech API 实现，其中 SpeechRecognition 接口允许用户通过语音输入文本。这一功能特别适用于搜索框、表单填写、语音助手等场景。虽然目前浏览器支持有限，但在 Chrome 等基于 Chromium 的浏览器中已经可以稳定使用。

启用语音识别的基本步骤

要实现语音输入，需创建一个 SpeechRecognition（或其前缀版本 webkitSpeechRecognition）实例，并配置相关事件回调。

检查浏览器是否支持语音识别接口
创建识别实例并设置参数（如语言、连续识别等）
绑定结果、错误和结束事件处理函数
启动识别并获取语音转文字的结果

代码示例：简单的语音输入框

以下是一个完整的 HTML 示例，展示如何将语音识别集成到输入框中：

<input type="text" id="speechInput" placeholder="点击按钮开始说话">
<button id="startBtn">开始语音输入</button>

<script>
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();

  // 设置识别语言
  recognition.lang = 'zh-CN'; // 中文
  // recognition.lang = 'en-US'; // 英文

  // 是否连续识别
  recognition.continuous = false;

  // 返回结果时触发
  recognition.onresult = function(event) {
    const transcript = event.results[0][0].transcript;
    document.getElementById('speechInput').value = transcript;
  };

  // 错误处理
  recognition.onerror = function(event) {
    console.error('识别出错:', event.error);
  };

  // 结束识别
  recognition.onend = function() {
    console.log('识别结束');
  };

  // 绑定按钮事件
  document.getElementById('startBtn').onclick = function() {
    recognition.start();
  };
} else {
  alert('当前浏览器不支持语音识别，请使用 Chrome 浏览器');
}
</script>

登录后复制