前后端分离（React+Node.js）下用Azure Speech API处理MediaStream实现实时翻译字幕

一、优先选择前端直接处理（推荐） #

Azure语音服务提供官方JavaScript浏览器SDK，完全支持在前端直接处理MediaStream音频，无需传输到后端，彻底解决实时传输的痛点。

• 安装依赖：

  npm install microsoft-cognitiveservices-speech-sdk
  

  也可直接通过CDN引入SDK脚本

• 核心实现步骤：

  1. 从WebRTC的MediaStream中提取音频轨道：

     const audioTrack = mediaStream.getAudioTracks()[0];
     const audioStream = new MediaStream([audioTrack]);
     

  2. 用Azure SDK包装音频流并初始化翻译客户端：

     import * as sdk from "microsoft-cognitiveservices-speech-sdk";
     
     // 从后端获取临时令牌（避免前端存密钥）
     const token = await fetch("/api/get-azure-token").then(res => res.text());
     const speechConfig = sdk.SpeechTranslationConfig.fromAuthorizationToken(token, "你的区域");
     speechConfig.speechRecognitionLanguage = "源语言代码（如zh-CN）";
     speechConfig.addTargetLanguage("目标语言代码（如en-US）");
     
     const audioConfig = sdk.AudioConfig.fromStreamInput(audioStream);
     const translator = new sdk.TranslationRecognizer(speechConfig, audioConfig);
     

  3. 监听翻译结果，实时渲染字幕：

     translator.recognized = (s, e) => {
       if (e.result.reason === sdk.ResultReason.TranslatedSpeech) {
         const translatedText = e.result.translations.get("目标语言代码");
         // 更新页面上的字幕元素
         document.getElementById("subtitle").textContent = translatedText;
       }
     };
     
     translator.startContinuousRecognitionAsync();
     

前端密钥安全解决方案 #

绝对不能将Azure订阅密钥硬编码到前端代码中，推荐采用后端生成临时访问令牌的方式：

• 后端调用Azure语音服务的令牌API（或使用SDK的令牌生成方法），生成具有有效期（如1小时）的受限令牌
• 前端通过接口请求获取该令牌，用令牌初始化SDK，令牌过期后自动重新请求

二、后端处理的简化替代方案 #

如果因业务限制必须通过后端处理，无需手动转换PCM块，用现成工具简化流程：

• 前端侧：使用MediaRecorder将音频轨道录制成WebM格式的Blob，按固定时间切片（如1秒）通过Socket.io发送给后端

  const mediaRecorder = new MediaRecorder(audioStream, { mimeType: "audio/webm" });
  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) {
      socket.emit("audio-chunk", e.data);
    }
  };
  mediaRecorder.start(1000); // 每1秒发送一次切片
  

• 后端侧：使用microsoft-cognitiveservices-speech-sdk的Node.js版本，将收到的Blob转换为可读流后调用翻译API，再将结果通过Socket推回前端
• 注意：这种方式会引入一定的传输延迟，实时性不如前端直接处理

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