通过向音频流 url 发起轻量级 fetch 请求并读取 http 响应头，可在不下载完整资源的前提下获取 `content-type`（如 `audio/mpeg`）和 icecast 自定义头 `icy-br`，从而实时显示音频格式与码率。
在 Web 广播场景中，<audio> 元素本身不暴露底层 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);
});
});
}使用方式（配合播放事件）：
<audio id="radio-player"></audio> <div>格式：<span id="mime">—</span></div> <div>码率：<span id="br">—</span></div>
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 事件中加防抖或标记位，避免多次触发。
该方案平衡了准确性、性能与兼容性，是 Web Radio UI 中展示格式与码率的工业级实践。
