当前位置：首页 > JavaScript

js实现语音识别

2026-01-30 18:21:23JavaScript

语音识别的基本实现

在JavaScript中实现语音识别主要依赖于Web Speech API中的SpeechRecognition接口。现代浏览器（如Chrome、Edge）原生支持该API，无需额外库。

浏览器兼容性检查

使用前需检测浏览器是否支持：

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
  // 支持语音识别
} else {
  console.error('当前浏览器不支持语音识别API');
}

初始化语音识别

创建识别实例并配置参数：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.continuous = false; // 是否连续识别
recognition.interimResults = true; // 是否返回临时结果
recognition.lang = 'zh-CN'; // 设置语言代码

事件监听处理

绑定关键事件处理器：

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

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.onend = () => {
  console.log('识别结束');
};

控制识别流程

启动和停止识别的方法：

// 开始识别
document.getElementById('startBtn').addEventListener('click', () => {
  recognition.start();
});

// 停止识别
document.getElementById('stopBtn').addEventListener('click', () => {
  recognition.stop();
});

多语言支持示例

切换识别语言的实现：

function setLanguage(langCode) {
  recognition.lang = langCode;
}

// 中文识别
setLanguage('zh-CN');

// 英文识别
setLanguage('en-US');

实时结果显示

在页面上动态显示识别结果：

js实现语音识别

recognition.onresult = (event) => {
  const resultElement = document.getElementById('result');
  let interim = '';
  let final = '';

  Array.from(event.results).forEach((result, index) => {
    if (result.isFinal) {
      final += result[0].transcript;
    } else {
      interim += result[0].transcript;
    }
  });

  resultElement.innerHTML = `<p>${final}</p><em>${interim}</em>`;
};

注意事项

需要用户授权麦克风权限
HTTPS环境下更可靠（本地开发localhost除外）
不同浏览器可能有前缀差异（webkit前缀）
移动设备上可能存在额外限制

完整示例代码

<!DOCTYPE html>
<html>
<body>
  <button id="startBtn">开始说话</button>
  <button id="stopBtn">停止</button>
  <div id="result"></div>

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

    recognition.onresult = (event) => {
      const resultElement = document.getElementById('result');
      let transcript = '';

      for (let i = event.resultIndex; i < event.results.length; i++) {
        transcript += event.results[i][0].transcript;
      }

      resultElement.innerHTML = transcript;
    };

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

    document.getElementById('stopBtn').addEventListener('click', () => {
      recognition.stop();
    });
  </script>
</body>
</html>