17370845950

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

在 Web 广播（Web Radio）播放场景中， 元素本身不提供对底层 HTTP 响应头的直接访问能力——loadeddata 或 canplay 等事件触发时，媒体已开始解码，但原始响应元数据（如 MIME 类型、码率）早已丢失。所幸，大多数网络电台（尤其是基于 Icecast/Shoutcast 的流服务）会在初始 HTTP 响应中通过标准或自定义 Header 暴露关键信息：

• Content-Type：标识流的 MIME 类型（例如 audio/mpeg → MP3，audio/ogg → Ogg Vorbis，audio/aac → AAC）；
• icy-br（Icecast Bitrate）：非标准但广泛支持的自定义 Header，值为纯数字字符串（单位 kbps），如 128 表示 128 kbps。

由于流式响应通常无明确 Content-Length 且持续传输，我们不能等待完整响应，而应使用 AbortController 在获取响应头后立即终止请求，避免不必要的数据下载：

// ObtainStreamHeaders.js
export default function obtainStreamHeaders(src) {
  return new Promise((resolve, reject) => {
    const controller = new AbortController();
    fetch(src, { 
      method: 'HEAD', // 更优选择：仅请求头，无响应体
      signal: controller.signal,
      cache: 'no-cache' // 防止缓存干扰真实流头
    })
      .then(response => {
        const headers = {};
        response.headers.forEach((value, name) => {
          headers[name.toLowerCase()] = value; // 统一小写便于匹配
        });
        resolve(headers);
      })
      .catch(err => {
        // 注意：部分服务器对 HEAD 不友好，fallback 到 GET + abort
        if (err.name === 'AbortError') {
          // 可选：尝试 GET + abort，但 HEAD 是首选
          console.warn('HEAD failed, falling back to GET+abort...');
          fetch(src, { 
            method: 'GET',
            signal: new AbortController().signal,
            cache: 'no-cache'
          })
            .then(r => {
              const h = {};
              r.headers.forEach((v, n) => h[n.toLowerCase()] = v);
              resolve(h);
            })
            .catch(reject);
        } else {
          reject(err);
        }
      });
  });
}

在播放逻辑中，建议在 onplaying（而非 loadeddata）后调用该函数，确保流已建立连接、服务端 Header 已稳定返回：

const audio = new Audio();
audio.src = 'https://some-radio-station.com/stream';

audio.onplaying = () => {
  obtainStreamHeaders(audio.src)
    .then(headers => {
      const mimeType = headers['content-type'] || 'unknown';
      const bitrate = headers['icy-br'] 
        ? `${parseInt(headers['icy-br'], 10)} kbps` 
        : 'unknown';

      document.getElementById('mime').textContent = mimeType;
      document.getElementById('br').textContent = bitrate;
    })
    .catch(err => {
      console.warn('Failed to fetch stream headers:', err);
      document.getElementById('mime').textContent = '—';
      document.getElementById('br').textContent = '—';
    });
};

audio.addEventListener('error', () => {
  document.getElementById('mime').textContent = 'error';
  document.getElementById('br').textContent = 'error';
});

⚠️ 注意事项：

• CORS 限制：若电台服务未设置 Access-Control-Allow-Origin: *（或你的域名），fetch 将因跨域被浏览器拦截。此时需依赖服务端代理，或确认该电台是否公开支持 CORS；
• HEAD vs GET：优先使用 method: 'HEAD'，它语义正确、开销最小；若服务器不支持 HEAD（返回 405 或超时），再降级为 GET + AbortController.abort()；
• Header 大小写敏感：HTTP Header 名不区分大小写，但 JS headers.get() 区分，推荐统一转为小写遍历；
• Icecast 兼容性：icy-br 仅在 Icecast 服务器启用 header 模式时存在；Shoutcast v2 支持类似 icy-br，但 v1 通常不返回该字段；
• 动态码率流：icy-br 仅反映初始配置码率，无法反映实际可变码率（VBR）的瞬时变化。

综上，该方案以极低资源消耗实现了流媒体元数据的“零延迟”获取，是 Web Radio UI 中展示格式与质量信息的可靠实践。