audio标签不播主因是格式fallback错误：必须用<source src="bg.mp3" type="audio/mpeg">+<source src="bg.ogg" type="audio/ogg">双源兜底，type不可写错，且需服务器配置正确MIME类型与用户手势触发play()。
audio 标签不播，八成是格式 fallback 写错了
浏览器不会报错，只会沉默跳过不支持的 <source>。只写一个 src="bg.mp3" 就等于赌浏览器解码器是否认得这个 MP3 编码——Firefox 可能直接跳过，iOS Safari 播一半卡住，Android Chrome 偶尔报 MEDIA_ERR_SRC_NOT_SUPPORTED (code: 4)。
必须用双格式静态兜底：
-
<source src="bg.mp3" type="audio/mpeg">—— 所有平台底线，Safari/iOS 必须有它 -
<source src="bg.ogg" type="audio/ogg">—— Firefox/Linux 主力，编码必须是 Vorbis（不是 Opus），用ffprobe bg.ogg确认输出含Audio: vorbis - 删掉
.wav回退：体积大、Chrome 对 IEEE Float WAV 直接拒解码 -
type值不能凑合：audio/mp3是无效 MIME，必须写audio/mpeg
离线环境 audio 失效？别双击 HTML 文件
用 file:// 协议打开 HTML，Chrome/Firefox/Safari 全部静默屏蔽音频加载——控制台无报错，Network 面板里请求都看不到。这不是路径问题，是安全策略硬拦截。
唯一可行方案：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 本地起 HTTP 服务：
python3 -m http.server 8000，然后访问http://localhost:8000 - 所有
src用相对路径：src="audio/bg.mp3"，不要./audio/bg.mp3或../assets/bg.mp3（Safari 对..解析不稳定） -
<source>必须带type属性，否则 Safari 离线时直接忽略整条<source> - 设
preload="metadata"：只取头信息（时长、采样率），避免因文件缺失导致控件不渲染、duration为NaN
autoplay 不生效？不是 bug，是浏览器在等你动手
写了 autoplay muted 还没声音？不是 JS 错了，是浏览器强制要求“用户手势触发”。Chrome/Firefox 允许静音自动播，但 iOS Safari 仍需一次点击或触摸才能解锁播放能力。
可靠做法只有一条路径：
- 删掉
autoplay属性（它已形同虚设） - 监听真实用户事件：
click或touchstart（iOS 17+ 要求非 passive） -
play()必须在事件回调第一层同步调用，不能包在setTimeout、Promise.then或异步函数里 - 移动端加
playsinline属性，否则 iOS Safari 强制全屏跳转到系统播放器
服务器没配 MIME 类型，audio 就是摆设
即使 <source> 写得再全，如果响应头里 Content-Type 是 text/plain 或空着，浏览器会当普通文本扔掉，连解码器都不唤起。
检查和修复方法：
- 打开 Network 面板，点音频请求，看 Response Headers 里的
Content-Type是否为audio/mpeg或audio/ogg - Apache 用户，在
.htaccess加：AddType audio/mpeg .mp3、AddType audio/ogg .ogg - Nginx 用户，在
types块加：audio/mpeg mp3;、audio/ogg ogg; - 本地开发用
python3 -m http.server自带正确 MIME，比双击安全得多
最常被忽略的是：iOS Safari 要求 play() 调用时，<audio> 元素必须在视口内、未被 display: none 或 opacity: 0 遮挡——哪怕只是 CSS 动画中途的透明状态，也会让播放失败。
