当前位置：首页 > 行业动态 > 正文

html5语音识别

HTML5语音识别基于Web Speech API实现，通过SpeechRecognition接口将语音转为文本，支持实时识别与事件回调，主流浏览器如Chrome已原生支持

环境与兼容性检查

HTML5语音识别基于SpeechRecognition接口实现，需满足以下条件：

  1. 浏览器支持：仅部分现代浏览器支持（如Chrome 25+、Firefox 27+、Safari 14+），Edge和旧版IE不兼容。
  2. 协议限制：需在https或localhost环境下运行，因涉及麦克风权限。
  3. 设备要求：需配备麦克风的物理设备或模拟输入。

基本使用步骤

  1. 创建SpeechRecognition实例： 
    const recognition = new SpeechRecognition();
  2. 配置参数：设置语言、是否连续识别等。
  3. 绑定事件回调：处理识别结果、错误、结束等事件。
  4. 启动识别：调用recognition.start()开始监听。

核心参数配置表

参数名称 类型 描述 示例值
lang 字符串 识别语言（如zh-CN） 'en-US'
continuous 布尔值 是否连续识别 true
interimResults 布尔值 是否返回临时结果 false
maxAlternatives 整数 保留的最佳结果数量 1

事件处理逻辑表

事件名称 触发时机 作用
result 识别到有效结果时 获取最终或临时文本（result.transcript）
error 发生错误时（如权限被拒绝） 处理错误类型（error.message）
end 识别结束时（非连续模式） 重启识别或释放资源
nomatch 无法匹配语法规则时（需启用语法） 提示用户重新输入

实际应用案例

示例1：基础语音转文本

<!DOCTYPE html>
<html>
<body>
  <button id="start">开始语音识别</button>
  <p id="output"></p>
  <script>
    const recognition = new SpeechRecognition();
    const btn = document.getElementById('start');
    const output = document.getElementById('output');
    btn.onclick = () => {
      recognition.start(); // 开始识别
    };
    recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript; // 获取最终结果
      output.textContent = `识别结果：${transcript}`;
    };
    recognition.onerror = (event) => {
      output.textContent = `错误：${event.message}`;
    };
  </script>
</body>
</html>

示例2：连续识别控制动画

let isListening = false;
recognition.continuous = true; // 开启连续识别
function toggleRecognition() {
  if (!isListening) {
    recognition.start();
    output.textContent = '正在监听...';
    isListening = true;
  } else {
    recognition.stop();
    output.textContent = '已停止监听';
    isListening = false;
  }
}
recognition.onend = () => {
  if (isListening) {
    recognition.start(); // 自动重启连续识别
  }
};

常见问题与解决方案

问题描述 解决方案
浏览器提示“不支持” 更换为Chrome/Firefox最新版本，或使用Polyfill模拟（功能有限）。
无法获取麦克风权限 确保页面通过https访问，检查浏览器隐私设置，手动允许权限。
识别结果不准确 调整lang参数（如zh-CN），或使用Grammar接口限定语法规则。

相关问题与解答

问题1：如何判断当前浏览器是否支持语音识别？
解答：通过检查SpeechRecognition是否为全局对象，且实例化后不会抛出错误。 

if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  console.log('支持语音识别');
} else {
  console.log('不支持');
}

问题2：如何处理连续识别中的多个结果？
解答：在onresult事件中遍历event.results数组，过滤掉临时结果（isFinal为false）。 

recognition.onresult = (event) => {
  const finalTranscript = event.results.map(result => result.isFinal ? result[0].transcript : '').join('');
  output.textContent = finalTranscript; // 仅保留最终结果拼接
};
语音识别
0

相关文章