audio标签需加controls才显示控件，仅src属性会导致静默加载；必须用提供mp3+ogg双格式并声明type；autoplay须配合muted才生效；原生控件不可CSS定制，需JS自定义。
audio 标签不是“加了就能播”，不配 <source></source> 或漏写 controls，用户大概率听不到声音，也看不到播放器。
为什么 audio 标签放进去没反应？
最常见原因是只写了 <audio src="a.mp3"></audio> 却没加 controls 属性——这会让音频静默加载、不可操作，且无任何 UI 提示。浏览器不会报错，但用户完全感知不到它存在。
- 必须显式添加
controls才能显示播放/暂停、音量、进度条等默认控件 -
src属性虽可直接写在<audio></audio>上，但不利于格式兼容，应优先用<source></source>多源声明 - 若仅依赖单个 MP3 文件，在 Firefox 或旧版 Safari 中可能直接失效（它们不支持 MP3 解码）
如何正确提供多格式音频以覆盖主流浏览器？
靠单一格式无法保证跨浏览器可用，必须按浏览器支持优先级提供至少两种格式，并用 <source></source> 显式声明 MIME 类型。顺序很重要：浏览器从上到下匹配第一个它能解码的 <source></source>。
- 推荐组合：
<source src="a.mp3" type="audio/mpeg"></source>（Chrome/Safari/Edge/IE9+） +<source src="a.ogg" type="audio/ogg"></source>（Firefox/Opera） - WAV 虽通用但体积大，仅在音质要求极高且文件极短时考虑；
type="audio/wav"不可省略，否则 Chrome 可能忽略该源 -
<audio></audio>内部的 fallback 文本（如“您的浏览器不支持 audio 标签”）只在不支持<audio></audio>的极老浏览器中显示，现代浏览器即使解码失败也不会展示它
autoplay 和 muted 为什么经常失效？
现代浏览器（Chrome 66+、Firefox 66+、Safari 11+）对自动播放有严格策略：未静音的 autoplay 必须发生在用户手势（如点击）之后，否则会被拦截。 直接写 autoplay 几乎必然失败。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 可行方案：加
muted属性，再配autoplay，即<audio autoplay muted controls></audio>—— 静音状态下多数浏览器允许自动播放 -
preload影响加载行为：preload="none"延迟加载，preload="metadata"只加载头信息（推荐用于长音频），preload="auto"全量预加载（慎用，影响首屏性能） -
loop是布尔属性，写成loop="loop"或loop=""都合法，但只需写loop即可生效
audio 标签的样式与交互限制
<audio></audio> 自带的控件是 UA（User Agent）渲染的，无法用 CSS 深度定制外观，比如改按钮图标、拖拽条颜色等。想精细控制 UI，必须关闭 controls，用 JavaScript 调用 play()、pause()、currentTime 等 API 自行实现。
- 隐藏原生控件：
<audio controls style="display: none;"></audio>或移除controls属性 - 获取当前播放时间：
audioEl.currentTime，设置为audioEl.currentTime = 30可跳转到 30 秒处 - 监听播放结束：
audioEl.addEventListener('ended', handler)，注意该事件只在自然结束时触发，pause()不会触发
真正麻烦的不是写法，而是浏览器策略和格式兼容的隐性约束——比如 autoplay 表面生效却无声，或 ogg 在 Safari 里根本不动。这些细节不实测很难察觉。
