HTML音频标签怎么做多格式兼容-html教程-PHP中文网

浏览器不解析文件头猜编码，只按type匹配；省略type时chrome或可碰巧播mp3，但safari（尤其ios）直接跳过source，导致duration为nan、canplay不触发、控件灰显。

html音频标签怎么做多格式兼容

浏览器不会解包音频文件去猜编码，它只认 type 声明。省略 type 时，Chrome 可能碰巧加载 MP3，但 Safari（尤其 iOS）直接跳过整个 <source></source>，导致 duration 为 NaN、canplay 不触发、控制条灰掉。

常见静默失败现象：
- <source src="a.mp3"></source> → iOS Safari 控制台无报错，但没声音、没加载进度
- 多个 <source></source> 都没写 type → 浏览器逐个发 404 请求，直到超时才放弃

浏览器按 DOM 顺序调用 canPlayType()，一旦返回 "probably" 或 "maybe" 就立刻加载，不再往后看。顺序错了，兼容性方案等于没写。

推荐 fallback 顺序：<source src="a.opus" type="audio/ogg; codecs=opus"></source> → <source src="a.m4a" type="audio/mp4; codecs=aac"></source> → <source src="a.mp3" type="audio/mpeg"></source>
别把 .wav 放第一位：16-bit PCM 文件体积大，Firefox 虽能解码，但用户得等完整下载才出声
Safari 17.5 不认 audio/ogg，哪怕你写的是 .opus 文件，也必须声明 codecs=opus，否则跳过
删掉没声明 type 的 <source></source>：它可能绕过 MIME 检查直接试播，结果报 MEDIA_ERR_DECODE 却找不到原因

90% 的“静音”“卡 loading”“拖不动进度条”，问题不在 HTML，而在 Nginx/Apache 没配对 MIME、Range 请求或 CORS。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

Nginx 必须显式加 add_type audio/ogg .opus;、add_type audio/mp4 .m4a;、add_type audio/mpeg .mp3;
响应头 Content-Type 必须和 type 值完全一致，比如 audio/ogg; codecs=opus 对应 Content-Type: audio/ogg，不能是 application/octet-stream
跨域音频必须带 Access-Control-Allow-Origin: *，否则 Safari 直接拒绝解码，连错误都不抛
必须支持 Range 请求，否则 Safari/iOS 无法分片加载，拖动失效、currentTime 设置无效

用户点一下 play() 不等于真能响。现代浏览器会因格式不支持、网络中断、自动播放策略等原因拒绝，必须主动捕获。

用 audio.play().catch(e => { }) 捕获三类关键错误：NotAllowedError（自动播放被拒）、NotSupportedError（格式不支持）、AbortError（网络中断）
监听 error 事件可定位具体哪个 <source></source> 失败：audio.addEventListener('error', () => console.log(audio.error?.code))，code === 4 表示所有源都不可用
别依赖 canplay 判断就绪——它在元数据加载完就触发，音频体可能还没到；canplaythrough 更可靠，但延迟明显，适合非首帧敏感场景
设置播放位置要分平台：iOS 必须等 canplay 后再设 currentTime，Android 可以先设再 play()