当前位置：首页 > HTML

h5页面实现语音输入

2026-01-15 21:25:07HTML

语音输入实现方法

H5页面实现语音输入主要依赖浏览器的Web Speech API，包括语音识别（SpeechRecognition）和语音合成（SpeechSynthesis）两部分。以下是具体实现步骤：

检查浏览器兼容性 确保浏览器支持Web Speech API，可通过以下代码检测：

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
  console.log('语音识别支持');
} else {
  console.log('当前浏览器不支持语音识别');
}

初始化语音识别 创建语音识别实例并配置参数：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置语言为中文
recognition.interimResults = false; // 是否返回临时结果
recognition.maxAlternatives = 1; // 返回最大候选结果数

处理识别结果 添加结果事件监听器：

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

错误处理 添加错误事件监听：

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

触发语音输入 通过按钮点击启动语音识别：

h5页面实现语音输入

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

注意事项

用户权限 浏览器会请求麦克风使用权限，需确保页面运行在安全上下文（HTTPS或localhost）中。

移动端适配 移动设备上可能需要处理自动标点符号和不同浏览器的差异行为。

性能优化 长时间监听会消耗资源，建议设置连续识别模式或超时限制：

h5页面实现语音输入

recognition.continuous = false; // 单次识别
recognition.stop(); // 手动停止

多语言支持 通过修改lang参数支持不同语言：

recognition.lang = 'en-US'; // 英语
recognition.lang = 'ja-JP'; // 日语

完整示例代码

<!DOCTYPE html>
<html>
<body>
  <input type="text" id="voice-input">
  <button id="start-btn">开始语音输入</button>

  <script>
    const startBtn = document.getElementById('start-btn');
    const voiceInput = document.getElementById('voice-input');

    if ('webkitSpeechRecognition' in window) {
      const recognition = new webkitSpeechRecognition();
      recognition.lang = 'zh-CN';
      recognition.interimResults = false;

      startBtn.addEventListener('click', () => {
        recognition.start();
      });

      recognition.onresult = (event) => {
        voiceInput.value = event.results[0][0].transcript;
      };

      recognition.onerror = (event) => {
        console.error('识别错误:', event.error);
      };
    } else {
      startBtn.disabled = true;
      alert('当前浏览器不支持语音识别');
    }
  </script>
</body>
</html>