本文介绍一种通过 fetch + abortcontroller 预请求音频流响应头的方式，安全、高效地获取 web 广播流的 mime 类型（如 audio/mpeg）和 icecast/icy 元数据（如 icy-br 比特率），无需下载完整音频资源。
在 Web 广播（如 Icecast/Shoutcast 流）播放场景中，原生 <audio> 元素无法直接暴露 HTTP 响应头（如 Content-Type 或自定义的 icy-br），因此无法在播放时动态显示音频格式或码率。虽然 loadeddata 或 canplay 事件能反映加载状态，但它们不提供服务端返回的元信息。
一个可靠且轻量的解决方案是：在音频开始播放前（例如监听 onplaying），对同一流地址发起一次无实体体的预检请求——使用 fetch() 并立即中止连接，仅提取响应头。关键在于利用 AbortController 在收到响应头后立刻终止请求，避免实际下载音频数据，既节省带宽又提升响应速度。
以下是可直接复用的模块化实现：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
// 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);
}
});
});
}使用方式（配合 <audio> 播放器）：
<audio id="radio-player" controls></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 => {
// 解析 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 配置，即可稳定支撑电台信息面板、自适应码率提示等增强体验功能。
