• 检查浏览器是否支持 SpeechRecognition
• 创建识别实例，并设置连续识别和是否返回中间结果
• 监听 onresult 事件获取识别文本
• 通过 start() 启动识别，stop() 停止识别

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

// 连续识别模式
recognition.continuous = true;

// 返回中间结果（比如正在识别中的文字）
recognition.interimResults = true;

// 设置语言
recognition.lang = 'zh-CN';

recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');

  console.log('识别结果：', transcript);
};

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

// 开始识别
recognition.start();

• continuous：设为 true 时持续监听，直到手动停止
• interimResults：true 表示返回中间结果，可用于实时显示“正在听写”效果
• lang：指定识别语言，如 'zh-CN' 中文，'en-US' 英文
• onstart：识别开始时触发
• onend：识别结束时触发，可在此重新启动
• onerror：发生错误时调用，例如无权限或网络问题

recognition.onend = () => {
  console.log('识别已结束，尝试重启');
  recognition.start(); // 持续监听
};

• 必须在 HTTPS 环境下运行（本地开发时 localhost 例外）
• 首次使用会提示用户授权麦克风
• Chrome、Edge 支持良好；Safari 部分支持；Firefox 不支持 SpeechRecognition
• 移动端 Android Chrome 支持，iOS Safari 支持有限

if (!('SpeechRecognition' in window) && !('webkitSpeechRecognition' in window)) {
  alert('当前浏览器不支持语音识别，请使用 Chrome 或 Edge');
}

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

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