最简能跑的必须同时含src和controls属性；src需为相对路径或绝对URL，避免本地文件直接双击打开；应提供MP3与OGG多格式回退并正确声明type；autoplay需配合muted使用，且移动端需先静音播放再取消。
最简能跑的 <audio></audio> 必须带 src 和 controls，缺一不可——不加 controls 就等于没放，用户根本看不到播放器。
为什么写了
常见错误是只写 <audio src="song.mp3"></audio>，但没加 controls 属性。此时浏览器加载了音频，但完全不渲染控件，也不报错，用户点不了、调不了音量、甚至意识不到音频存在。
-
src值必须是相对路径（如"./audio/intro.mp3"）或绝对 URL（如"https://cdn.example.com/sound.ogg"），不能只写"intro.mp3"或"file:///..." - 直接双击 HTML 文件打开时，Chrome/Firefox 会因安全策略拒绝加载本地音频；建议用
python -m http.server启一个本地服务再测试 - 控制台若报
404或ERR_FAILED，大概率是路径错、文件名大小写不对、或服务器没配对 MIME 类型（audio/mpeg对应 .mp3，不是audio/mp3）
MP3 播不了？别怪浏览器，改代码
Firefox 默认不支持 MP3，Safari 对 OGG 更友好，只放一个 .mp3 文件等于主动放弃部分用户。这不是 bug，是格式支持差异。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 解决方法是用
<source></source>提供多格式回退：浏览器按顺序尝试第一个能解码的 - 推荐组合：
<source src="song.mp3" type="audio/mpeg"></source>+<source src="song.ogg" type="audio/ogg"></source> -
type属性不能省，也不能写错——"audio/mp3"是无效值，必须是"audio/mpeg"（MP3）、"audio/ogg"（OGG） - 别依赖
.wav：体积大、无压缩、移动端兼容差，已基本淘汰
autoplay 失效？静音是硬性条件
Chrome、Safari、Edge 等主流浏览器默认拦截“有声自动播放”，哪怕写了 autoplay，也会静默失败——这不是代码问题，是策略限制。
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠方式是加上
muted：<audio src="intro.mp3" controls autoplay muted></audio> - 如果想后续取消静音，得等首次播放成功后再设
audio.muted = false，否则可能被再次拦截 - 移动端 iOS Safari 更严格：即使有用户手势，若音频从未成功播放过，仍可能拒绝；先用
muted播一次，之后再开声音更稳
真正容易被忽略的是 preload 和加载状态管理——JS 调用 play() 报 DOMException: play() failed because the user didn't interact with the document first 时，很多人只盯着“用户没交互”，却忘了音频本身可能还没加载元数据，这时加 preload="metadata" 或监听 loadeddata 事件才是关键。
