js实现语音输入
使用Web Speech API实现语音输入
Web Speech API提供语音识别功能，允许浏览器直接捕获和处理语音输入。以下代码展示基础实现：
// 检查浏览器兼容性
if ('webkitSpeechRecognition' in window) {
const recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.onstart = () => {
console.log('语音识别启动');
};
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
console.log('识别结果:', transcript);
document.getElementById('output').textContent = transcript;
};
recognition.onerror = (event) => {
console.error('识别错误:', event.error);
};
document.getElementById('startBtn').addEventListener('click', () => {
recognition.start();
});
} else {
console.error('当前浏览器不支持语音识别');
}添加实时反馈功能
通过设置interimResults为true，可以获取实时识别结果：
recognition.interimResults = true;
recognition.onresult = (event) => {
let interimTranscript = '';
let finalTranscript = '';
for (let i = event.resultIndex; i < event.results.length; i++) {
const transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript += transcript;
} else {
interimTranscript += transcript;
}
}
document.getElementById('interim').textContent = interimTranscript;
document.getElementById('final').textContent = finalTranscript;
};设置语音识别参数
可配置参数优化识别体验：
recognition.lang = 'zh-CN'; // 设置中文识别
recognition.maxAlternatives = 3; // 获取多个可能结果
recognition.continuous = true; // 持续识别模式兼容性处理方案
对于不支持的浏览器，可提供备用方案：
function fallbackVoiceInput() {
alert('请使用最新版Chrome或Edge浏览器');
// 可在此处添加第三方语音服务集成
}用户界面优化建议
- 添加可视化麦克风状态指示器
- 提供语言选择下拉菜单
- 实现超时自动停止功能
- 添加识别结果编辑区域
完整示例需包含HTML结构：
<button id="startBtn">开始录音</button>
<div id="interim" style="color: gray;"></div>
<div id="final"></div>
