如何获取网络音频流的 MIME 类型与比特率

本文介绍一种通过 fetch + abortcontroller 预请求音频流响应头的方式，安全、高效地获取 web 广播流的 mime 类型（如 audio/mpeg）和 icecast/icy 元数据（如 icy-br 比特率），无需下载完整音频资源。

在 Web 广播（如 Icecast/Shoutcast 流）播放场景中，原生

一个可靠且轻量的解决方案是：在音频开始播放前（例如监听 onplaying），对同一流地址发起一次无实体体的预检请求——使用 fetch() 并立即中止连接，仅提取响应头。关键在于利用 AbortController 在收到响应头后立刻终止请求，避免实际下载音频数据，既节省带宽又提升响应速度。

以下是可直接复用的模块化实现：

// 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);         }       });   }); }

使用方式（配合

 
格式：—
 
码率：—

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 配置，即可稳定支撑电台信息面板、自适应码率提示等增强体验功能。