audio标签必须显式添加controls属性才能显示播放控件，否则即使音频加载成功也无法操作；src需用相对或绝对路径，禁用本地文件协议；应提供MP3/OGG/WAV多格式回退并声明type；play()须由用户手势触发且需catch错误；CSS需设置vertical-align对齐段落。
audio 标签不加 controls 就等于没放
写了 <audio src="music.mp3"></audio> 却看不到播放器？不是浏览器坏了，是根本没渲染控件。controls 是布尔属性，必须显式写出，否则音频加载了也“不可见、不可点、不可操作”。新手常误以为静音或加载失败，其实是被 UI 隐藏了。
常见错误写法：<audio src="./audio/intro.mp3"></audio>（无 controls）
正确最小结构：<audio src="./audio/intro.mp3" controls></audio>
- controls 必须存在，哪怕你后续用 JS 隐藏它；没有它，用户第一次接触就卡死
- src 路径必须是相对路径（如
"./audio/sound.mp3"）或绝对 URL（如"https://cdn.example.com/sound.ogg"），不能是"C:\music\sound.mp3"或裸文件名"sound.mp3" - 直接双击 HTML 文件在 Chrome/Firefox 里打开时，
file://协议会拒绝加载音频——务必用python -m http.server启个本地服务再测
MP3 单格式在 Firefox 和 Safari 上大概率失效
只放一个 .mp3 文件，看似省事，但在 Firefox（不支持 MP3 专利解码）、旧版 Safari 或某些 Linux 浏览器上，播放器会显示“无法加载媒体”或空白。这不是路径问题，是格式兼容性断层。
正确做法是用 <source></source> 提供多格式回退，按顺序尝试：
立即学习“前端免费学习笔记（深入）”；
<audio controls> <source src="sound.mp3" type="audio/mpeg"> <source src="sound.ogg" type="audio/ogg"> <source src="sound.wav" type="audio/wav"> Your browser does not support the audio element. </audio>
-
.mp3兼容最广，但体积大；.ogg（Vorbis/Opus）压缩率高、开源免费，Chrome/Firefox/Edge 均原生支持 -
type属性必须写，尤其当服务器没配好 MIME 类型时——没type="audio/mpeg"，Safari 可能跳过该<source></source> - 服务器需返回正确 Content-Type：MP3 →
audio/mpeg，OGG →audio/ogg；Python 的http.server默认不设，GitHub Pages 也不自动识别，得靠Network面板确认响应头
JS 调用 play() 报 DOMException？本质是用户没点过页面
控制台报错 DOMException: play() failed because the user didn't interact with the document first，不是代码写错了，是浏览器策略强制要求：首次播放必须由用户手势（click/touchstart）触发。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
以下写法一定失败：
document.addEventListener('DOMContentLoaded', () => {
const audio = document.querySelector('audio');
audio.play(); // ❌ 静默拒绝
});
安全写法示例：
const audio = document.querySelector('audio');
document.body.addEventListener('click', () => {
audio.play().catch(e => console.log('play failed:', e));
}, { once: true });
- 不能放在
setTimeout、load或任何非用户交互回调里 -
play()返回 Promise，必须.catch()，否则错误被吞掉，调试时一脸懵 - iOS Safari 更狠：即使有 click，若该
<audio></audio>从未成功播过，play()仍可能被拒；稳妥做法是先audio.muted = true播一次，再解静音
段落里嵌音频，别让 <audio></audio> 破坏行高和对齐
把 <audio controls></audio> 直接塞进 <p></p> 里，常见问题是控件底部下沉、文字基线错位、移动端按钮挤变形。这不是 bug，是 <audio></audio> 默认为 inline-level 元素，但内部控件高度不一致。
解决方法很简单：
- 给
<audio></audio>加 CSS：vertical-align: middle;或vertical-align: text-bottom;，立刻对齐段落文字 - 如果要居中显示整个播放器，别用
<center></center>（已废弃），改用<p style="text-align: center"><audio controls>...</audio></p> - 多个音频并列？每个都得独立
id或 class，JS 控制时用event.target区分，别共用一个变量反复赋值
真正容易被忽略的点是：音频是否“可用”，80% 不是 HTML 写错了，而是路径错、MIME 类型缺、服务未启、或用户还没点过屏幕——先开 Network 面板看请求状态，再查控制台，最后动代码。
