Vue.js项目中Azure Cognitive Speech SDK麦克风调用报错问题

问题分析 #

你提供的代码存在几个明显问题，同时结合语音SDK的使用规范，这些是导致报错的核心原因：

• 错误使用await创建实例：SpeechRecognizer是同步构造函数，不需要加await，这会引发逻辑错误
• 未处理麦克风权限：浏览器需要用户主动授权麦克风访问，无授权会直接触发报错
• 实例管理混乱：多次点击可能重复创建recognizer实例，导致资源冲突
• 错误回调参数类型错误：recognizeOnceAsync的错误回调参数是SpeechRecognitionCanceledEventArgs而非字符串，原代码无法正确解析报错信息

修正后的代码 #

import * as SDK from "microsoft-cognitiveservices-speech-sdk";
import { RecognitionResult, SpeechRecognitionCanceledEventArgs } from "microsoft-cognitiveservices-speech-sdk";

// 全局维护recognizer实例，避免重复创建
let recognizer = null;

export default {
  data() {
    return {
      subscriptionKey: "", // 替换为你的Azure语音订阅密钥
      serviceRegion: "", // 替换为你的服务区域（如eastus）
      isMicClicked: false,
      capturedText: ""
    };
  },
  methods: {
    async startSpeechRecognition() {
      // 已有实例则先销毁，避免冲突
      if (recognizer) {
        recognizer.close();
        recognizer = null;
        this.isMicClicked = false;
        return;
      }

      try {
        // 主动请求麦克风权限
        const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
        mediaStream.getTracks().forEach(track => track.stop()); // 临时释放，交给SDK接管

        // 初始化语音配置
        const speechConfig = SDK.SpeechConfig.fromSubscription(
          this.subscriptionKey,
          this.serviceRegion
        );
        speechConfig.speechRecognitionLanguage = "en-US";
        const audioConfig = SDK.AudioConfig.fromDefaultMicrophoneInput();
        
        // 同步创建识别器实例
        recognizer = new SDK.SpeechRecognizer(speechConfig, audioConfig);

        this.isMicClicked = true;

        // 单次识别回调
        recognizer.recognizeOnceAsync(
          (result: RecognitionResult) => {
            console.log("识别结果:", result);
            this.capturedText = result.text;
            this.cleanupRecognizer();
          },
          (event: SpeechRecognitionCanceledEventArgs) => {
            // 解析具体错误信息
            let errorMsg = "";
            if (event.errorDetails) {
              errorMsg = event.errorDetails;
            } else if (event.reason === SDK.CancellationReason.EndOfStream) {
              errorMsg = "语音输入已结束";
            } else {
              errorMsg = `识别取消：${SDK.CancellationReason[event.reason]}`;
            }
            console.error("识别失败:", errorMsg);
            this.cleanupRecognizer();
          }
        );
      } catch (permError) {
        console.error("麦克风权限被拒绝:", permError);
        this.isMicClicked = false;
      }
    },
    cleanupRecognizer() {
      // 统一清理实例状态
      this.isMicClicked = false;
      if (recognizer) {
        recognizer.close();
        recognizer = null;
      }
    },
    setCapturedText(text) {
      this.capturedText = text;
    }
  },
  beforeUnmount() {
    // 组件销毁时强制清理资源
    this.cleanupRecognizer();
  }
};

额外排查步骤 #

• 验证配置正确性：确认subscriptionKey和serviceRegion与Azure语音资源的配置完全一致，区域必须使用短代码（如eastus，不能用全称）
• 检查浏览器权限：在地址栏左侧权限图标中，确认麦克风权限已设置为"允许"
• 查看详细错误：通过错误回调中的event.errorDetails获取SDK返回的具体报错原因（如密钥无效、网络超时、区域不匹配等）

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