如何将API中Buffer格式的音频发送至React客户端并播放？

核心方案选择 #

• 禁止转字符串发送：字符串转换会丢失二进制信息、增加传输体积，完全没必要
• 最优方案（短音频场景）：Express直接返回Buffer并设置正确响应头；React端请求二进制数据，转成Blob后用<audio>标签播放
• 流式方案（长音频/实时场景）：仅当需要逐段生成并实时播放长文本时，再考虑用Socket.io流式传输，否则无需增加复杂度

1. 修改Express API端点 #

Google TTS返回的audioContent本身就是MP3格式的Buffer，直接返回即可，无需转换。关键是设置Content-Type让浏览器识别音频类型：

app.post("/generate-story-support", async (req, res) => {
  try {
    // 替换为实际调用Google TTS的逻辑，比如调用你的synthesizeSentence函数
    const ttsBuffer = await synthesizeSentence(req.body.sentence);

    // 设置响应头，声明返回内容为MP3音频
    res.setHeader("Content-Type", "audio/mpeg");
    // 直接发送Buffer数据
    return res.status(200).send(ttsBuffer);
  } catch (error) {
    console.error("生成音频失败:", error);
    return res.status(500).json({ error: "生成音频失败" });
  }
});

如果需要处理多段文本生成的音频，可先合并多个Buffer（注意MP3格式合并的兼容性），或逐段返回单独处理。

2. 修改React客户端代码 #

请求时需指定responseType为arraybuffer接收二进制数据，转成Blob后生成可访问的Object URL，再用<audio>元素播放：

import { useEffect, useRef, useState } from 'react';
import axios from 'axios';

function AudioPlayer() {
  const audioRef = useRef(null);
  const [audioUrl, setAudioUrl] = useState(null);

  useEffect(() => {
    const fetchAudio = async () => {
      try {
        // 指定responseType为arraybuffer，确保接收二进制数据
        const response = await axios.post(
          "http://localhost:8000/generate-story-support",
          { sentence: "Hello from Google TTS!" }, // 发送需要转换的文本
          { responseType: 'arraybuffer' }
        );

        // 将ArrayBuffer转为MP3格式的Blob
        const audioBlob = new Blob([response.data], { type: 'audio/mpeg' });
        // 生成临时可访问的音频URL
        const url = URL.createObjectURL(audioBlob);
        setAudioUrl(url);
      } catch (error) {
        console.error("请求音频失败:", error);
      }
    };

    fetchAudio();
  }, []);

  // 处理播放逻辑（规避浏览器自动播放限制）
  const handlePlay = () => {
    if (audioRef.current && audioUrl) {
      audioRef.current.src = audioUrl;
      audioRef.current.play().catch(err => {
        console.error("播放失败:", err);
      });
    }
  };

  return (
    <div>
      <button onClick={handlePlay}>播放音频</button>
      <audio ref={audioRef} />
    </div>
  );
}

export default AudioPlayer;

关键注意点：浏览器自动播放限制 #

现代浏览器禁止无用户交互的自动播放，必须通过用户操作（如点击按钮）触发播放。如果需要后台自动播放，需先引导用户完成一次交互动作。

3. 流式传输方案（可选） #

针对长文本逐段生成、实时播放的场景，可使用Socket.io实现流式传输：

后端（Socket.io） #

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  socket.on('generate-audio', async (sentences) => {
    for (const sentence of sentences) {
      const ttsBuffer = await synthesizeSentence(sentence);
      // 以base64编码传输二进制数据，兼容Socket.io
      socket.emit('audio-chunk', ttsBuffer.toString('base64'));
    }
    socket.emit('audio-end');
  });
});

前端（Socket.io） #

import { useEffect, useRef } from 'react';
import io from 'socket.io-client';

function StreamingAudioPlayer() {
  const audioRef = useRef(null);
  const chunks = useRef([]);

  useEffect(() => {
    const socket = io('http://localhost:8000');

    // 发送需要转换的多段文本
    socket.emit('generate-audio', ['First sentence', 'Second sentence']);

    // 接收音频片段
    socket.on('audio-chunk', (base64Chunk) => {
      // 将base64转回ArrayBuffer
      const binaryString = atob(base64Chunk);
      const bytes = new Uint8Array(binaryString.length);
      for (let i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      chunks.current.push(bytes);
    });

    // 所有片段接收完成后合并播放
    socket.on('audio-end', () => {
      const audioBlob = new Blob(chunks.current, { type: 'audio/mpeg' });
      const audioUrl = URL.createObjectURL(audioBlob);
      audioRef.current.src = audioUrl;
      audioRef.current.play();
    });

    return () => socket.disconnect();
  }, []);

  return <audio ref={audioRef} />;
}

方案对比 #

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