HTML音频怎么做格式回退兼容方案-html教程-PHP中文网

ios safari和firefox因未声明type会跳过，导致静音、canplay不触发、控件灰显；每个必须带精确type，如audio/mpeg、audio/ogg; codecs=opus等，且服务端mime配置须严格匹配。

html音频怎么做格式回退兼容方案

只写一个 <source src="a.mp3"></source>，iOS Safari 和 Firefox 很可能直接静音、不触发 canplay、控制条灰显——这不是 bug，是浏览器按规范跳过不声明 type 的 source。

浏览器不解析文件头猜格式，只靠 type 字符串做首轮过滤。漏写或写错 type，等于主动放弃该格式。

type="audio/mpeg" 是 MP3 的唯一合法值，audio/mp3 会被 Safari 完全忽略
OGG 文件若用 Opus 编码，必须写 type="audio/ogg; codecs=opus"；只写 audio/ogg 在 Chrome 中 canPlayType() 可能返回空字符串
type="audio/mp4" 对应 .m4a 文件，但 Safari 实际只认 AAC-LC 编码；用 ffprobe a.m4a 确认 codec_name 是 aac，不是 alac 或 he-aac
WAV 必须用 type="audio/wav"，audio/x-wav 在 Safari 中无效

浏览器从上到下逐个调用 Audio.canPlayType()，第一个返回 "probably" 或 "maybe" 的就立即加载，后续全部跳过。顺序错了，高兼容格式根本没机会执行。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

推荐 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> → <source src="a.wav" type="audio/wav"></source>
别把 .wav 放第一位：16-bit PCM 文件体积大，Firefox 虽能解，但用户得等完整下载才出声
Safari 17.5 明确不认 audio/ogg（无 codecs），哪怕文件后缀是 .opus，也必须显式写 codecs=opus

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

Nginx 必须显式加：add_type audio/ogg .opus;、add_type audio/mp4 .m4a;、add_type audio/mpeg .mp3;、add_type audio/wav .wav;
响应头 Content-Type 必须和 <source type></source> 完全一致：比如 audio/ogg; codecs=opus 对应 Content-Type: audio/ogg，返回 application/octet-stream 就直接失败
跨域音频必须带 Access-Control-Allow-Origin: *，否则 Safari 静默拒绝解码，连 error 事件都不抛
必须支持 Range 请求（Nginx 加 add_header Accept-Ranges bytes;），否则 iOS Safari 无法分片加载，currentTime 设置无效、拖动失效