加多个source标签并按浏览器兼容性排序是解决音频播放问题的关键，需搭配controls、canplaythrough监听和合理preload策略。
直接用 <audio></audio> 标签就能嵌入音频，但不加 controls 属性，用户根本看不到播放器；不提供多个 <source></source>，很可能在 Firefox 或 Safari 里完全无声。
为什么加了 src 还是没声音？
常见错误是只写一个 MP3 地址，指望所有浏览器都支持。实际上：
- Chrome、Safari、Edge 支持
audio/mpeg（MP3） - Firefox、Opera 原生优先认
audio/ogg（OGG） - Safari 对 WAV 支持较好，但文件体积大，一般不用作主力
正确做法是把多个 <source></source> 塞进 <audio></audio> 里，浏览器从上到下试播，遇到第一个能解码的就用：
<audio controls> <source src="talk.mp3" type="audio/mpeg"> <source src="talk.ogg" type="audio/ogg"> <p>您的浏览器不支持音频播放，请升级</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </audio>
那个 <p></p> 不是摆设——它会在 IE8 或极老安卓 WebView 里显示，别删。
autoplay 为什么点了也不响？
现代浏览器（Chrome 66+、Firefox 66+、Safari 12.1+）默认禁止有声自动播放，哪怕你写了 autoplay，也会静默失败。真正能生效的只有两种情况：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 加
muted：<audio autoplay muted></audio>—— 静音状态下允许自动播，适合背景音效 - 用户主动触发：比如点击按钮后调用
play()，且必须是同步调用（不能包在setTimeout或 Promise.then 里）
Safari 更狠：即使 muted，如果页面没获得焦点（比如新标签页后台打开），照样拒绝播放。所以别依赖 autoplay 做关键逻辑。
怎么知道音频真的能播完，而不是卡在半路？
别监听 loadeddata 或 canplay，它们只表示“第一帧已加载”或“可以开始播”，不代表后续数据跟得上。真实可用的信号是 canplaythrough：
const audio = document.querySelector('audio');
audio.addEventListener('canplaythrough', () => {
console.log('大概率能播完');
// 这里再调用 play() 或更新 UI
});
audio.addEventListener('error', () => {
console.error('加载失败：', audio.error?.code);
});
但注意：canplaythrough 在弱网下可能永远不触发。建议加个 8 秒超时兜底，避免用户干等。
preload 怎么选才不浪费流量？
preload 不是“开/关”开关，而是三个明确策略：
-
preload="none"：一点不预加载，点播时才发请求 —— 列表页一堆音频缩略图时首选 -
preload="metadata"：只拉时长、采样率等元信息，不下载音频体 —— 播放器能立刻显示总时长，体验好 -
preload="auto"：浏览器自己决定，实际多数时候等同于metadata，尤其在移动网络下
别迷信 auto。小文件（metadata，大文件（如一小时播客）直接 none，否则用户没点就下了几 MB。
最常被忽略的是音频元素本身是否被隐藏：如果父容器设置了 display: none 或 visibility: hidden，部分浏览器（尤其是 Safari）会暂停其音频上下文，导致 play() 调用无效。确保它在 DOM 中是“可见可交互”的状态。
