Express发送音频Buffer后无法设置Audio.currentTime问题排查

嘿，我来帮你排查这个问题！你遇到的currentTime设置无效、音频从头播放的核心原因，不是Content-Duration头的格式问题，而是你的服务器没有支持浏览器的「范围请求（Range Requests）」——这是实现音频跳转的必要条件。我帮你拆解问题并给出修正方案：

你当前代码的几个问题 #

• 错误的Duration头: 你用的X-Content-Duration是非标准头，而且格式不对。标准的Content-Duration应该是秒数（比如180.473），而不是00:00:03:473这种格式（而且这个格式本身也写错了，应该是HH:MM:SS.sss才对）。不过更关键的是，没有范围请求支持的话，这个头再正确也没用。
• 未处理Range请求: 当你设置currentTime时，浏览器会向服务器发送Range请求头，要求获取音频的某一段数据（比如Range: bytes=1000-）。但你的服务器现在不管什么请求都直接返回整个音频文件，浏览器无法定位到指定位置，只能从头播放。
• 缺少Accept-Ranges头: 这个头用来告诉浏览器“我服务器支持范围请求”，没有它浏览器甚至不会尝试发送Range请求。

修正后的代码实现 #

我把你的代码修改成支持范围请求的版本，同时修正Duration头的问题：

const mp3Duration = require('mp3-duration'); // 确保你已经安装了这个包

app.get("/song/:songId", function(req, res) { 
  var songId = req.param('songId'); 
  songData.findOne({songId:songId}, function (err, doc) { 
    if(err || doc == null){ 
      res.status(404).send('Not found');
      return;
    }

    var songBuffer = Buffer.from(doc.base64, 'base64');
    const totalLength = songBuffer.length;

    // 解析Range请求头
    const range = req.headers.range;
    if (range) {
      // 格式是 "bytes=start-end"，我们只处理start的情况，end默认到文件末尾
      const parts = range.replace(/bytes=/, "").split("-");
      const start = parseInt(parts[0], 10);
      const end = parts[1] ? parseInt(parts[1], 10) : totalLength - 1;
      const chunkLength = end - start + 1;
      const chunk = songBuffer.slice(start, end + 1);

      // 获取音频时长
      mp3Duration(songBuffer, (err, duration) => {
        const responseHeaders = {
          'Content-Type': 'audio/mpeg', // 更标准的MIME类型，兼容性更好
          'Content-Length': chunkLength,
          'Content-Range': `bytes ${start}-${end}/${totalLength}`,
          'Accept-Ranges': 'bytes'
        };
        // 如果时长获取成功，添加标准的Content-Duration头
        if (!err) {
          responseHeaders['Content-Duration'] = duration.toString();
        }
        res.writeHead(206, responseHeaders);
        res.end(chunk);
      });
    } else {
      // 没有Range请求，返回整个文件
      mp3Duration(songBuffer, function (err, duration) {
        const responseHeaders = {
          'Content-Type': 'audio/mpeg',
          'Content-Length': totalLength,
          'Accept-Ranges': 'bytes'
        };
        if (!err) {
          responseHeaders['Content-Duration'] = duration.toString(); // 直接用秒数
        }
        res.header(responseHeaders);
        res.end(songBuffer);
      });
    }
  });
});

关键修改点说明 #

1. 支持Range请求: 解析Range头，截取对应的音频片段，返回206 Partial Content状态码，同时设置Content-Range头告诉浏览器返回的是哪一段数据。
2. 添加Accept-Ranges头: 明确告诉浏览器服务器支持范围请求，这样浏览器才会在跳转时发送Range请求。
3. 修正Content-Duration: 使用mp3Duration返回的秒数作为值，用标准的Content-Duration头（而非自定义的X-前缀头）。
4. 标准MIME类型: 把audio/mp3改成audio/mpeg，这是MP3文件更标准的MIME类型，兼容性更好。

额外注意事项 #

• 确保你的mp3Duration包是最新版本，避免解析错误。
• 测试时可以在浏览器开发者工具的「网络」面板查看请求：当设置currentTime时，应该能看到发送了带有Range头的请求，服务器返回206状态码。
• 如果音频文件本身存在损坏（比如缺少索引信息），可能也会导致无法跳转，但你是从base64转换的，这种概率较低。

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