通过向音频流 url 发起轻量级 fetch 请求并读取 http 响应头，可在不下载完整音频的情况下获取 `content-type`（如 `audio/mpeg`）和 icecast 自定义头 `icy-br`，从而实时显示音频格式与码率。
在 Web 广播（Web Radio）播放场景中，
- 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 中展示格式与质量信息的可靠实践。
