如何获取网络音频流的 MIME 类型与比特率

本文介绍一种通过 fetch + abortcontroller 预请求音频流响应头的方式，安全、高效地获取 web 广播流的 mime 类型（如 audio/mpeg）和 icecast/icy 元数据（如 icy-br 比特率），无需下载完整音频资源。

在 Web 广播（如 Icecast/Shoutcast 流）播放场景中，原生 元素无法直接暴露 HTTP 响应头（如 Content-Type 或自定义的 icy-br），因此无法在播放时动态显示音频格式或码率。虽然 loadeddata 或 canplay 事件能反映加载状态，但它们不提供服务端返回的元信息。

一个可靠且轻量的解决方案是：在音频开始播放前（例如监听 onplaying），对同一流地址发起一次无实体体的预检请求——使用 fetch() 并立即中止连接，仅提取响应头。关键在于利用 AbortController 在收到响应头后立刻终止请求，避免实际下载音频数据，既节省带宽又提升响应速度。

以下是可直接复用的模块化实现：

// ObtainStreamHeaders.js
export default function obtainStreamHeaders(src) {
  return new Promise((resolve, reject) => {
    const controller = new AbortController();
    // 发起 fetch 请求，但不读取 body
    fetch(src, {
      method: 'HEAD', // 推荐优先使用 HEAD 方法（若服务端支持）
      signal: controller.signal,
      // 可选：添加跨域凭据（如需认证）
      // credentials: 'omit'
    })
      .then(response => {
        // 立即中止，防止 body 下载
        controller.abort();

        const headers = {};
        response.headers.forEach((value, key) => {
          headers[key.toLowerCase()] = value; // 统一小写便于匹配
        });

        resolve(headers);
      })
      .catch(err => {
        // 注意：abort() 会触发 catch，需区分是主动中止还是网络错误
        if (err.name === 'AbortError') {
          // 正常中止，尝试从已缓存的 response 中提取 headers（部分浏览器支持）
          resolve({});
        } else {
          reject(err);
        }
      });
  });
}

使用方式（配合 播放器）：

格式：—
码率：—

import obtainStreamHeaders from './ObtainStreamHeaders.js';

const audio = document.getElementById('radio-player');
audio.src = 'https://some-radio-station.com/stream';

audio.addEventListener('playing', () => {
  obtainStreamHeaders(audio.src)
    .then(headers => {
      // 解析 MIME 类型（标准化显示）
      const mime = headers['content-type'] || 'unknown';
      const mimeType = mime.split(';')[0].trim(); // 如 "audio/mpeg" → "audio/mpeg"
      document.getElementById('mime').textContent =
        mimeType === 'audio/mpeg' ? 'MP3' :
        mimeType === 'audio/ogg' ? 'OGG' :
        mimeType === 'audio/aac' ? 'AAC' :
        mimeType;

      // 提取 Icecast 比特率（单位 kbps）
      const br = headers['icy-br'] || headers['x-icy-br'];
      document.getElementById('br').textContent =
        br ? `${parseInt(br, 10)} kbps` : 'unknown';
    })
    .catch(err => {
      console.warn('Failed to fetch stream headers:', err);
      document.getElementById('mime').textContent = '—';
      document.getElementById('br').textContent = '—';
    });
});

⚠️ 注意事项与兼容性说明：

• ✅ 优先使用 HEAD 方法：比 GET 更语义准确，多数流服务器（Icecast、Nginx + proxy_pass）支持返回完整 headers；若返回 405，回退至 GET + AbortController。
• ⚠️ CORS 限制：若流服务未设置 Access-Control-Expose-Headers: content-type, icy-br, x-icy-br，JavaScript 将无法读取这些自定义 header。此时需服务端配合配置 CORS 白名单（尤其 icy-br 是非标准 header）。
• ? Icecast 特性：icy-br 是 Icecast 服务器特有的响应头（如 icy-br: 128），Shoutcast 通常使用 X-Audiocast-Br 或类似字段，建议同时检查 x-icy-br、x-audiocast-br 等常见别名。
• ? 重复调用优化：对于长时播放的电台，可缓存 headers 结果，避免每次 playing 都请求（注意：流地址重定向或服务端变更时可能失效）。

总结：该方法以极小开销换取关键元数据，是当前 Web Audio 场景下获取流格式与码率最实用、兼容性良好的方案。结合服务端 CORS 配置，即可稳定支撑电台信息面板、自适应码率提示等增强体验功能。