Express使用.pipe(res)发送音频无法拖动进度条seek如何解决

问题根因 #

你当前使用createReadStream('media/mp3file.mp3').pipe(res)的写法，会默认返回200 OK状态码，将整个MP3文件从开头到结尾完整传输给客户端，没有实现HTTP标准的Range分段请求处理逻辑：

• 浏览器拖动音频进度条触发seek操作时，会自动在请求头中携带Range: bytes=起始字节位置-字段，请求指定位置开始的音频片段
• 服务端不识别该请求头时，永远从文件开头返回数据，浏览器无法获取seek对应位置的内容，就会出现进度条自动回弹、跳转失败的问题
• 要支持seek，核心是正确响应Range请求，返回206 Partial Content状态码和对应字节区间的文件片段。

实现方案 #

方案1：使用Express内置方法（零额外依赖，最简便） #

Express内置的res.sendFile方法已经默认实现了完整的Range请求处理逻辑，自动处理分段响应、状态码和响应头，直接替换原有pipe代码即可：

const path = require('path')

// 音频接口路由
app.get('/audio', (req, res) => {
  const mp3Path = path.join(__dirname, 'media/mp3file.mp3')
  // 自动支持Range请求，返回206分段内容，天然适配音频进度跳转
  res.sendFile(mp3Path)
})

方案2：手动实现Range分段逻辑（适合自定义流场景） #

如果需要自己控制流读取逻辑（比如需要加权限校验、实时转码等自定义操作），可以手动解析Range头实现分段返回，步骤如下：

1. 安装Range解析依赖（也可以自己写正则解析，使用开源包更稳妥，避免边界情况处理错误）：

   npm i range-parser
   

2. 接口逻辑实现：

const fs = require('fs')
const path = require('path')
const rangeParser = require('range-parser')

app.get('/audio', (req, res) => {
  const mp3Path = path.join(__dirname, 'media/mp3file.mp3')
  // 读取文件基础信息
  fs.stat(mp3Path, (err, fileStat) => {
    if (err) return res.sendStatus(404)
    const totalSize = fileStat.size

    // 声明服务端支持字节范围请求
    res.setHeader('Accept-Ranges', 'bytes')
    res.setHeader('Content-Type', 'audio/mpeg')

    // 无Range请求头时返回全量文件
    const rangeHeader = req.headers.range
    if (!rangeHeader) {
      res.setHeader('Content-Length', totalSize)
      return fs.createReadStream(mp3Path).pipe(res)
    }

    // 解析Range头
    const parseResult = rangeParser(totalSize, rangeHeader)
    // Range格式非法返回416状态码
    if (parseResult === -1) {
      res.setHeader('Content-Range', `bytes */${totalSize}`)
      return res.sendStatus(416)
    }

    // 音频场景默认取第一个分段范围
    const { start, end } = parseResult[0]
    // 设置206分段响应相关头
    res.status(206)
    res.setHeader('Content-Range', `bytes ${start}-${end}/${totalSize}`)
    res.setHeader('Content-Length', end - start + 1)
    // 读取对应字节区间的流返回
    fs.createReadStream(mp3Path, { start, end }).pipe(res)
  })
})

验证方式 #

修改完成后，在浏览器打开页面触发音频播放，拖动进度条时打开开发者工具查看网络请求，若音频请求的状态码为206 Partial Content，请求头携带Range字段、响应头携带Content-Range字段，即说明配置生效，进度条可以正常拖动跳转。

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