如何从Lambda分块流式传输音频到React客户端以解决负载超限问题

问题根源 #

Lambda同步调用的响应Payload上限为6MB，你当前使用的base64编码会让数据体积额外膨胀33%，实际可传输的原始音频大小不到4.5MB，大文件必然触发超限错误。 #

方案1：优先使用S3预签名URL（最稳妥，无文件大小限制） #

这是生产环境处理大文件传输的最优方案，完全绕开Lambda的Payload限制，改造成本极低：

• 将生成的音频文件上传到S3存储桶
• 生成有效期可控的S3预签名访问链接，直接返回给React客户端
• 客户端直接通过链接加载音频，无需处理分片、编码等额外逻辑
  参考改造代码：

const AWS = require('aws-sdk');
const s3 = new AWS.S3();
const AUDIO_BUCKET = '你的音频存储桶名称';

readFile(`${outputFile}`, async function (data) {
  try {
    // 自定义S3存储路径
    const s3FileKey = `audio/${Date.now()}_output.mp3`;
    // 上传音频到S3
    await s3.putObject({
      Bucket: AUDIO_BUCKET,
      Key: s3FileKey,
      Body: data,
      ContentType: 'audio/mpeg' // 替换为你实际使用的音频MIME类型
    }).promise();
    // 生成15分钟有效期的预签名访问链接
    const audioAccessUrl = s3.getSignedUrl('getObject', {
      Bucket: AUDIO_BUCKET,
      Key: s3FileKey,
      Expires: 15 * 60
    });
    responseBody.audioUrl = audioAccessUrl;
    status = statusCodes.OK;
    return sendResponse(status, responseBody);
  } catch (err) {
    console.log("error " + err);
    reject(err);
  }
});

方案2：Lambda函数URL流式响应（无API Gateway场景适用） #

如果不想引入S3存储，可以开启Lambda函数URL的流式响应能力，最大支持20MB响应体积，无需base64编码可直接传输二进制音频：

• 先在Lambda控制台开启函数URL功能，将响应模式配置为RESPONSE_STREAM
• 直接将音频文件以流的形式返回给前端，省掉base64编码的体积损耗
  参考改造代码：

const { createReadStream } = require('fs');
const awslambda = require('aws-lambda');

export const handler = awslambda.streamifyResponse(async (event, responseStream, _context) => {
  // 创建音频文件读取流
  const audioReadStream = createReadStream(outputFile);
  // 配置响应元数据
  const responseMetadata = {
    statusCode: 200,
    headers: {
      'Content-Type': 'audio/mpeg',
      'Transfer-Encoding': 'chunked'
    }
  };
  responseStream = awslambda.HttpResponseStream.from(responseStream, responseMetadata);
  // 将音频流直接写入响应流
  audioReadStream.pipe(responseStream);
  await new Promise((resolve, reject) => {
    audioReadStream.on('end', resolve);
    audioReadStream.on('error', reject);
  });
});

React客户端接收逻辑：

// 前端流式拉取音频代码
const loadAudio = async () => {
  const response = await fetch('你的Lambda函数URL地址');
  const audioBlob = await response.blob();
  const audioPlayUrl = URL.createObjectURL(audioBlob);
  // 赋值给audio标签即可播放
  document.querySelector('#audio-player').src = audioPlayUrl;
}

方案3：分片拉取（必须通过API Gateway访问场景） #

如果必须通过API Gateway触发Lambda，注意HTTP API最大支持10MB响应、REST API最大支持6MB响应，超过该上限仍建议使用方案1。如果文件大小在20MB以内，可以将音频切为4MB左右的分片，前端发起多次请求拉取不同偏移量的分片，在前端拼接为完整音频文件即可。 #

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