除Firefox外HTML5 audio元素异常？Node.js音频服务排查

嘿，我来帮你拆解下这个问题～

首先，你的Node.js服务器代码确实存在一个关键问题：没有处理HTTP的范围请求（Range Requests），这正是Chrome和Opera无法拖动音频进度条的核心原因。

为什么会出现不同浏览器的差异？ #

• Chrome/Opera：这类基于Blink引擎的浏览器，要实现音频进度拖动（seek功能），必须依赖服务器支持范围请求——简单说就是浏览器可以请求音频文件的某一段数据，而不是整个文件。你的代码直接用fs.readFileSync把整个音频一次性返回，浏览器拿到完整文件后没法按需加载指定片段，自然拖不动进度条。
• Firefox：Firefox对这种一次性返回的音频文件做了本地缓存优化，相当于把整个文件存在本地后模拟了范围请求，所以能正常拖动。
• Safari：一方面Safari对OGG音频格式的原生支持有限（它更兼容MP3、M4A这类格式），另一方面它对音频播放的服务器要求更严格，缺少范围请求支持时就会直接触发下载。

怎么解决？ #

要让Chrome/Opera支持进度拖动，你需要修改服务器代码，让它能处理Range请求头，返回对应的文件片段，同时设置正确的响应头。下面是修改后的完整代码：

const http = require('http');
const fs = require('fs');
const path = require('path');

// 音频文件的绝对路径
const audioFilePath = path.resolve('./test.ogg');

http.createServer((req, res) => {
  // 先获取文件的大小信息，这是处理范围请求的基础
  fs.stat(audioFilePath, (err, fileStats) => {
    if (err) {
      res.statusCode = 500;
      res.end('Failed to read file information');
      return;
    }

    const totalFileSize = fileStats.size;
    const rangeHeader = req.headers.range;

    if (rangeHeader) {
      // 解析Range请求，格式通常是 "bytes=start-end"
      const rangeParts = rangeHeader.replace(/bytes=/, '').split('-');
      const requestedStart = parseInt(rangeParts[0], 10);
      const requestedEnd = rangeParts[1] ? parseInt(rangeParts[1], 10) : totalFileSize - 1;

      // 确保请求的范围在文件有效范围内，避免越界
      const validStart = Math.max(0, Math.min(requestedStart, totalFileSize - 1));
      const validEnd = Math.max(validStart, Math.min(requestedEnd, totalFileSize - 1));
      const chunkSize = validEnd - validStart + 1;

      // 设置206 Partial Content状态码和对应响应头
      res.writeHead(206, {
        'Content-Range': `bytes ${validStart}-${validEnd}/${totalFileSize}`,
        'Accept-Ranges': 'bytes',
        'Content-Length': chunkSize,
        'Content-Type': 'audio/ogg',
      });

      // 流式读取指定范围的文件内容并返回
      const audioStream = fs.createReadStream(audioFilePath, { start: validStart, end: validEnd });
      audioStream.pipe(res);
    } else {
      // 没有Range请求时，返回完整文件
      res.writeHead(200, {
        'Content-Length': totalFileSize,
        'Content-Type': 'audio/ogg',
        'Accept-Ranges': 'bytes', // 告诉浏览器服务器支持范围请求
      });
      fs.createReadStream(audioFilePath).pipe(res);
    }
  });
}).listen(9000);

代码说明： #

1. 获取文件大小：通过fs.stat拿到音频文件的总大小，这是计算片段范围的基础；
2. 解析Range请求：提取浏览器需要的起始和结束位置，同时做有效性校验，避免请求超出文件范围；
3. 返回部分内容：用206状态码（Partial Content）响应，配合Content-Range头告诉浏览器返回的是哪一段数据；
4. 流式传输：用fs.createReadStream读取指定范围的文件，流式返回给浏览器，既节省内存，也满足浏览器的分段加载需求。

Safari的额外问题 #

如果想让Safari也能正常播放而不是下载，建议把音频文件转成MP3或者M4A格式（Safari对这些格式的支持更好），同时确保服务器代码保持上述的范围请求支持。

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