如何从Azure Speech SDK获取TTS音频并在HTML audio标签中播放

完全可行，你可以通过直接获取合成后的二进制音频数据，绑定到原生 audio 元素实现自定义播放控制，以下是完整实现方案：

1. 依赖安装 #

首先安装官方语音SDK：

npm install microsoft-cognitiveservices-speech-sdk

2. 核心实现思路 #

调用SDK的合成方法时，不传入默认音频输出配置，直接接收合成完成返回的ArrayBuffer格式音频二进制数据，将其转换为Blob后生成ObjectURL，赋值给audio元素的src属性即可通过JS自由控制播放、暂停等操作。

3. 完整React组件示例 #

import { useRef } from 'react';
import { SpeechConfig, SpeechSynthesizer, ResultReason } from 'microsoft-cognitiveservices-speech-sdk';

// 替换为你自己的Azure语音服务凭证
const SPEECH_KEY = '你的语音服务密钥';
const SERVICE_REGION = '你的服务区域，比如 chinaeast2';

const TTSPage = () => {
  const audioRef = useRef(null);

  const handleTextToSpeech = async (text) => {
    // 初始化语音配置
    const speechConfig = SpeechConfig.fromSubscription(SPEECH_KEY, SERVICE_REGION);
    // 第二个参数传null，代表不需要SDK自动处理音频输出，直接返回二进制数据
    const synthesizer = new SpeechSynthesizer(speechConfig, null);

    synthesizer.speakTextAsync(
      text,
      (result) => {
        if (result.reason === ResultReason.SynthesizingAudioCompleted) {
          // 获取音频二进制数据
          const audioData = result.audioData;
          // 转换为Blob对象
          const audioBlob = new Blob([audioData], { type: 'audio/wav' });
          // 生成可访问的资源URL
          const audioUrl = URL.createObjectURL(audioBlob);
          // 绑定到audio元素
          audioRef.current.src = audioUrl;
          // 手动触发播放（需要在用户交互事件中调用才符合浏览器自动播放策略）
          audioRef.current.play().catch(err => {
            console.error('音频播放失败，请检查浏览器自动播放权限：', err);
          });
        } else {
          console.error('语音合成失败，错误原因：', result.errorDetails);
        }
        // 销毁合成实例释放资源
        synthesizer.close();
      },
      (error) => {
        console.error('合成过程出现异常：', error);
        synthesizer.close();
      }
    );
  };

  return (
    <div>
      <button onClick={() => handleTextToSpeech('测试文本转语音播放')}>
        点击生成并播放语音
      </button>
      {/* 原生audio元素，自带播放控制条，也可以隐藏后完全通过JS控制 */}
      <audio ref={audioRef} controls />
    </div>
  );
};

export default TTSPage;

4. 注意事项 #

• 生产环境不要直接将密钥明文写在前端代码中，建议通过服务端中转请求或者使用临时令牌验证，避免密钥泄露
• 音频播放需要符合浏览器自动播放策略，首次播放必须由用户的交互行为（如点击、触摸事件）触发，否则会被浏览器拦截
• 组件卸载或者音频播放完成后，可以调用URL.revokeObjectURL(audioRef.current.src)主动释放内存，避免内存泄漏
• 你可以通过speechConfig.speechSynthesisVoiceName属性自定义合成语音的音色、语种

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