结论：仅用单标签加src属性会导致90%兼容性问题；真正落地需<source>多格式兜底+明确type声明+iOS/Android的JS补丁。
直接说结论：只用 <audio> 或 <video> 单标签加 src 属性，90% 的兼容性问题会立刻暴露；真正能落地的兼容方案，必须靠 <source> 多格式兜底 + 明确 type 声明 + 针对 iOS/Android 的 JS 行为补丁。
为什么单 src 属性在 Safari 和旧版 Android 上大概率失败
浏览器不会“猜”你给的 MP4 文件是否含 H.264 编码，也不会主动解包判断音频是否带 AAC 封装。它只按 type 值做 MIME 类型匹配。省略 type 时，Chrome 可能碰巧加载成功，但 Safari（尤其 iOS）会直接跳过该 <source>，导致无源可播、canplay 不触发、duration 为 NaN。
常见错误现象：
-
<source src="talk.mp3">→ iOS Safari 拒绝加载，控制台静默失败 -
<video src="clip.mp4" controls>→ Android 4.4 内置浏览器黑屏，无报错 - 多个
<source>但没写type→ 浏览器逐个发起 404 请求，直到超时
实操建议：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每个
<source>必须带type，MP3 写type="audio/mpeg"，不是audio/mp3 - 视频优先提供 MP4（H.264+AAC）+ WebM（VP8+Vorbis）双源，
<source src="v.mp4" type="video/mp4">+<source src="v.webm" type="video/webm"> - 不要依赖
preload="auto"强制预加载，iOS 会忽略，且耗流量
autoplay 被拦截时的绕过条件与真实生效路径
autoplay 不是“写了就播”，而是“写了+满足策略+用户无交互时才可能播”。Chrome、Safari、Firefox 全部要求 muted 存在才能静音自动播放；iOS Safari 还额外要求页面已获得用户手势授权（比如用户点过任意区域），否则即使 muted 也静默失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 带声音的自动播放基本不可行，放弃
autoplay+ 无muted的组合 - 要自动播，必须同时写
autoplay muted，且确保视频编码支持静音（H.264 视频 + AAC 音频组合最稳） - 如需有声自动播，只能等用户首次交互后调用
play()，例如监听document.addEventListener('click', ...)后再触发 - 调用
play()必须在 Promise 中处理拒绝：video.play().catch(e => console.warn('play rejected:', e))
iOS 和 Android 在 audio 控制上的关键差异
iOS WebKit 对 <audio> 的生命周期控制极严：未触发 canplay 前设置 currentTime 无效；loadstart 和 loadeddata 事件触发不稳定；而 Android（尤其低版本 WebView）压根不抛 canplay，但 play 事件相对可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设置播放位置必须分平台：iOS 等
canplay，Android 直接设currentTime后调play() - 监听播放完成别只靠
ended：iOS 常不触发，改用timeupdate判断currentTime >= duration - 0.1 - 连续播放多段音频时，iOS 必须复用同一个
<audio>元素，仅替换src并调load()，不能新建元素 - 安卓端避免监听
canplay，它可能永不触发；loading 状态建议用networkState === 0（NETWORK_EMPTY）粗略判断
后备内容与降级逻辑怎么写才不被忽略
写 <p>您的浏览器不支持 audio 标签</p> 没用——现代浏览器只要认识 <audio> 标签，就不会渲染 fallback 文本，哪怕所有 <source> 都加载失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- fallback 内容必须放在
<audio>或<video>开始标签和结束标签之间，且不能被其他 HTML 元素包裹 - 更可靠的降级是 JS 主动检测：
if (!('audio' in document.createElement('audio')))或检查HTMLMediaElement.prototype.canPlayType返回值 - 真要提供下载链接，用
<a href="file.mp3" download>下载音频</a>，注意download属性在跨域资源上会被忽略 - 不要把 Flash 作为 fallback——2026 年所有主流浏览器已彻底移除 Flash 支持
最易被忽略的一点：很多团队以为加了双格式就高枕无忧，但没验证过 iOS 是否真的播出了 WebM —— 它根本不支持 WebM 音频，也不支持 VP9 视频。格式声明不是摆设，是浏览器决策的唯一依据。
