如何获取网络电台音频流的 MIME 类型与比特率_技术教程

通过向音频流 url 发起轻量级 fetch 请求并读取 http 响应头，可在不下载完整资源的前提下获取 `content-type`（如 `audio/mpeg`）和 icecast 自定义头 `icy-br`，从而实时显示音频格式与码率。

在 Web 广播场景中，元素本身不暴露底层 HTTP 响应头（如 Content-Type 或 icy-br），因此无法直接通过 audio.src 获取流的 MIME 类型或比特率。但我们可以借助 fetch() 配合 AbortController —— 在建立连接后立即中止请求，仅获取响应头信息，实现“零内容下载”的元数据探测。

以下是一个健壮、可复用的模块化实现：

// ObtainStreamHeaders.js
export default function obtainStreamHeaders(src) {
  return new Promise((resolve, reject) => {
    const controller = new AbortController();

    // 设置超时（推荐：3–5 秒），防止无限挂起
    const timeoutId = setTimeout(() => controller.abort(), 4000);

    fetch(src, {
      method: 'HEAD', // 优先使用 HEAD，更高效（但部分流服务器不支持）
      signal: controller.signal,
      // 若 HEAD 失败，可 fallback 到 GET + range（见下文进阶说明）
    })
      .then(response => {
        clearTimeout(timeoutId);
        // ✅ 关键：即使流式响应，headers 在 response 对象创建时已可用
        const headers = Object.fromEntries(response.headers.entries());
        resolve(headers);
      })
      .catch(err => {
        clearTimeout(timeoutId);
        reject(err.name === 'AbortError' 
          ? new Error('Stream header fetch timed out or aborted') 
          : 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 => {
      // 解析标准 Content-Type（如 audio/mpeg → mp3）
      const contentType = headers['content-type'] || '';
      const mimeToFormat = {
        'audio/mpeg': 'MP3',
        'audio/ogg': 'OGG',
        'audio/aac': 'AAC',
        'audio/mp4': 'M4A',
        'audio/flac': 'FLAC'
      };
      document.getElementById('mime').textContent = 
        mimeToFormat[contentType.split(';')[0].trim()] || contentType || '未知';

      // 解析 Icecast 码率头（注意：大小写敏感，常见为 icy-br 或 ICY-BR）
      const brHeader = headers['icy-br'] || headers['ICY-BR'];
      document.getElementById('br').textContent = brHeader 
        ? `${parseInt(brHeader, 10)} kbps` 
        : '未知';
    })
    .catch(err => {
      console.warn('获取流头失败:', err);
      document.getElementById('mime').textContent = '获取失败';
      document.getElementById('br').textContent = '—';
    });
});

✅ 关键注意事项：

CORS 限制：目标流服务必须设置 Access-Control-Expose-Headers: content-type, icy-br, ICY-BR，否则浏览器会屏蔽这些自定义头。若不可控（如公共电台），需通过服务端代理绕过；
HEAD vs GET：优先用 method: 'HEAD'，避免传输任何媒体数据；若服务器不支持 HEAD（返回 405 或空头），可改用 GET + Range: bytes=0-0（需服务端支持 Accept-Ranges）；
Icecast 头兼容性：icy-br 是 Icecast 专用扩展头，Shoutcast 2+ 也支持，但传统 Shoutcast 1.x 不支持；部分服务可能使用 X-ICYP-MetaData 或其他自定义字段；
MIME 映射建议：Content-Type 值如 audio/mpeg; charset=UTF-8 应先按分号截断再标准化，避免误判；
防重复请求：可在 playing 事件中加防抖或标记位，避免多次触发。