React.js中使用Azure Speech to Text服务无法识别麦克风语音求助

问题分析 #

你的两段代码都存在关键缺失或配置错误，导致语音无法被识别且无报错：

方案一（疑似Web Speech API）的问题 #

• 未正确初始化speechRecognizer：Web Speech API需要使用原生的SpeechRecognition/webkitSpeechRecognition构造函数，而非直接使用未定义的speechRecognizer变量。
• 冗余的音频流处理：Web Speech API会自动请求麦克风权限并获取音频流，无需手动创建AudioContext和调用getUserMedia（重复请求可能导致权限冲突）。
• 未绑定必要事件：缺少错误监听、结束事件监听，无法排查潜在问题。

方案二（Azure Speech Services）的问题 #

• 未初始化speechConfig：必须提供Azure订阅密钥和区域才能创建有效的语音配置。
• 未指定音频输入源：需要明确设置麦克风作为音频输入，否则识别器可能无法获取音频。
• 配置参数格式错误：phraseDetection的配置不符合Azure Speech Services的规范。
• 未处理识别结果：回调中仅打印提示，未读取实际识别文本。

修正后的代码示例 #

方案一：Web Speech API原生实现 #

import { useState } from 'react';

const SpeechToText = () => {
  const [recognizedText, setRecognizedText] = useState('');

  const startSpeechRecognition = () => {
    // 适配不同浏览器的Web Speech API
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
      alert('当前浏览器不支持语音识别功能');
      return;
    }

    const recognition = new SpeechRecognition();
    recognition.continuous = true; // 连续识别
    recognition.interimResults = false; // 只返回最终结果
    recognition.lang = 'zh-CN'; // 设置识别语言

    // 识别结果回调
    recognition.onresult = (event) => {
      const text = event.results[0][0].transcript;
      setRecognizedText(prev => prev + text);
      console.log('识别结果:', text);
    };

    // 错误监听
    recognition.onerror = (event) => {
      console.error('识别错误:', event.error);
      alert(`识别出错: ${event.error}`);
    };

    // 识别结束后自动重启（可选）
    recognition.onend = () => {
      console.log('识别会话结束');
      // recognition.start(); // 如需持续识别，可开启此注释
    };

    // 启动识别
    recognition.start();
  };

  return (
    <div>
      <button onClick={startSpeechRecognition}>开始语音识别</button>
      <div style={{ marginTop: '1rem' }}>
        <h3>识别结果:</h3>
        <p>{recognizedText}</p>
      </div>
    </div>
  );
};

export default SpeechToText;

方案二：Azure Speech Services实现 #

首先确保已安装Azure SDK：

npm install microsoft-cognitiveservices-speech-sdk

import { useState } from 'react';
import * as speechSDK from 'microsoft-cognitiveservices-speech-sdk';

const AzureSpeechToText = () => {
  const [recognizedText, setRecognizedText] = useState('');

  const startSpeechRecognition = () => {
    // 替换为你的Azure订阅密钥和区域
    const speechConfig = speechSDK.SpeechConfig.fromSubscription('你的订阅密钥', '你的区域');
    speechConfig.speechRecognitionLanguage = 'zh-CN'; // 设置识别语言

    // 指定麦克风作为音频输入
    const audioConfig = speechSDK.AudioConfig.fromDefaultMicrophoneInput();
    const reco = new speechSDK.SpeechRecognizer(speechConfig, audioConfig);

    // 单次识别（如需连续识别，改用startContinuousRecognitionAsync）
    reco.recognizeOnceAsync(
      (result) => {
        if (result.reason === speechSDK.ResultReason.RecognizedSpeech) {
          const text = result.text;
          setRecognizedText(prev => prev + text);
          console.log('识别结果:', text);
        } else if (result.reason === speechSDK.ResultReason.NoMatch) {
          console.log('未识别到语音:', result.noMatchDetails);
        }
        reco.close();
      },
      (error) => {
        console.error('识别失败:', error);
        alert(`识别失败: ${error}`);
        reco.close();
      }
    );
  };

  return (
    <div>
      <button onClick={startSpeechRecognition}>开始语音识别</button>
      <div style={{ marginTop: '1rem' }}>
        <h3>识别结果:</h3>
        <p>{recognizedText}</p>
      </div>
    </div>
  );
};

export default AzureSpeechToText;

额外注意事项 #

• 浏览器权限：确保页面在HTTPS环境下（localhost可例外），首次点击按钮时允许麦克风权限。
• 语言设置：根据实际需求调整lang或speechRecognitionLanguage参数，比如'en-US'对应英文识别。
• Azure配置：使用Azure服务时，必须确保订阅密钥有效，区域与创建资源时的区域一致。

内容的提问来源于stack exchange，提问作者Rohit Kharat