通过REST API从S3流式传输音频到客户端的故障修复问询

问题根源 #

你的代码没有给S3请求添加Range参数，导致S3返回完整音频文件，但API响应头却声明只返回了指定范围的片段（Content-Length设为chunk大小）。客户端音频控件会按响应头的长度截断流，播放完这段后就认为内容结束，从而循环播放开头部分。

解决方案（无需加载完整文件到内存） #

1. 给S3请求添加Range参数 #

AWS S3 v2的getObject支持通过Range参数指定字节范围，只需在下载参数中加入该字段，S3就会只返回对应范围的内容，避免传输整个文件。

修改流式传输工具函数：

const downloadParams = {
  Key,
  Bucket: bucketName,
  Range: `bytes=${startByte}-${endByte}` // 新增Range参数
};
const fileStream = s3.getObject(downloadParams).createReadStream();

2. 正确解析Range请求头并完善API逻辑 #

原来的startByte提取逻辑不够严谨，需适配标准的Range头格式（如bytes=0-或bytes=1024-2048），同时补充错误处理：

export default async function handler(req, res) {
  const { FILE_KEY_HERE } = req.query;
  const bucketName = "YOUR_BUCKET_NAME";

  // 获取文件元信息（用于获取总大小）
  const attr = await s3.headObject({ Key: FILE_KEY_HERE, Bucket: bucketName }).promise();
  const fileSize = attr.ContentLength;

  // 解析Range请求头
  const rangeHeader = req.headers.range;
  if (!rangeHeader) {
    // 若没有Range头，返回完整文件（可选，也可返回400要求分段请求）
    res.writeHead(200, {
      "Content-Length": fileSize,
      "Content-Type": attr.ContentType || "audio/mpeg",
    });
    s3.getObject({ Key: FILE_KEY_HERE, Bucket: bucketName }).createReadStream().pipe(res);
    return;
  }

  const CHUNK_SIZE = 10 ** 3 * 500; // ~500KB
  const [startStr, endStr] = rangeHeader.replace(/bytes=/, "").split("-");
  const startByte = parseInt(startStr, 10);
  // 若Range头只给了起始位置，默认到文件末尾或指定chunk大小的结束位置
  const endByte = endStr ? parseInt(endStr, 10) : Math.min(startByte + CHUNK_SIZE, fileSize - 1);
  const chunkLength = endByte - startByte + 1;

  // 设置响应头
  const headers = {
    "Content-Range": `bytes ${startByte}-${endByte}/${fileSize}`,
    "Accept-Ranges": "bytes",
    "Content-Length": chunkLength,
    "Content-Type": attr.ContentType || "audio/mpeg", // 用S3返回的实际MIME类型更可靠
  };

  res.writeHead(206, headers);

  // 从S3获取指定范围的流并管道到响应
  const downloadParams = {
    Key: FILE_KEY_HERE,
    Bucket: bucketName,
    Range: `bytes=${startByte}-${endByte}`
  };
  const fileStream = s3.getObject(downloadParams).createReadStream();

  // 处理流错误，避免服务器崩溃
  fileStream.on("error", (err) => {
    res.status(500).send("Error streaming audio");
  });

  fileStream.pipe(res);
}

3. 客户端组件保持不变 #

"use client";

const Audio = () => {
    return (
        <audio src="http://localhost:3000/api/stream/FILE_KEY_HERE" controls></audio>
    );
};

export default Audio;

补充说明 #

• 避免内存占用：通过给S3指定Range参数，服务器只会接收对应范围的字节流，不会加载完整文件到内存，完全符合你的需求。
• 预签名URL方案对比：如果不需要在API层做额外认证逻辑，预签名URL是更轻量的方案（直接让客户端从S3拉取）。但如果必须通过服务器做权限校验，上述流式代理方案是最优解。

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