js实现语音输入

实现语音输入的基本步骤

使用Web Speech API的SpeechRecognition接口实现语音输入功能。该API允许浏览器直接接收和处理语音输入。

浏览器兼容性检查

检测浏览器是否支持语音识别功能：

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
  // 浏览器支持语音识别
} else {
  // 浏览器不支持语音识别
}

创建语音识别实例

初始化语音识别对象并设置基本参数：

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

添加事件处理程序

设置各种事件监听器来处理语音识别过程：

recognition.onstart = () => {
  console.log('语音识别开始');
};

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  console.log('识别结果:', transcript);
};

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

recognition.onend = () => {
  console.log('语音识别结束');
};

控制语音识别

提供开始和停止语音识别的方法：

function startListening() {
  recognition.start();
}

function stopListening() {
  recognition.stop();
}

完整示例代码

整合上述功能的完整实现示例：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN';
recognition.interimResults = true;

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  document.getElementById('result').textContent = transcript;
};

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

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

document.getElementById('stopBtn').addEventListener('click', () => {
  recognition.stop();
});

注意事项

语音识别功能需要用户授权麦克风权限。现代浏览器会在首次使用时弹出权限请求对话框。

不同浏览器对Web Speech API的实现可能有所差异，建议在实际使用时进行充分测试。

某些浏览器可能需要使用前缀版本（如webkitSpeechRecognition），代码中已做兼容处理。

识别精度受环境噪音、发音清晰度和语言设置影响，实际应用中可能需要加入错误处理和重试机制。