在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密钥，但能提供更好的识别准确率和附加功能。
