在h5中实现语音输入

使用Web Speech API实现语音输入

Web Speech API是浏览器原生支持的语音识别接口，无需额外插件。以下为关键实现代码：

// 创建语音识别对象
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置语言
recognition.interimResults = true; // 返回临时结果

// 绑定结果处理事件
recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');
  document.getElementById('output').value = transcript;
};

// 开始/停止语音输入
document.getElementById('startBtn').addEventListener('click', () => recognition.start());
document.getElementById('stopBtn').addEventListener('click', () => recognition.stop());

兼容性处理方案

目前Chrome、Edge等基于Chromium的浏览器支持最佳，需注意：

• iOS Safari需要用户主动触发（如点击事件）
• 部分浏览器需添加前缀（webkitSpeechRecognition）
• 始终检查API可用性：

if (!('SpeechRecognition' in window) && !('webkitSpeechRecognition' in window)) {
  alert('当前浏览器不支持语音识别');
}

增强用户体验的技巧

添加视觉反馈指示录音状态：

.recording {
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

处理常见错误情况：

recognition.onerror = (event) => {
  console.error('识别错误:', event.error);
  if(event.error === 'not-allowed') {
    alert('请允许麦克风权限');
  }
};

备选第三方方案

当需要更高精度或跨浏览器支持时，可考虑：

• 科大讯飞开放平台WebAPI
• 百度语音识别SDK
• Azure Cognitive Services

这些方案通常需要申请API密钥，但能提供更好的识别准确率和附加功能。