必须添加controls属性才能显示播放控件；src路径需为相对或绝对url，禁用file://；提供mp3+ogg双格式回退；play()须由用户手势触发；需监听loadeddata等事件确保状态同步。
直接用 <audio></audio> 标签，但必须带 src 和 controls，否则音频“存在却不可见”——不是静音，是彻底没控件、点不了、播不了。
为什么加了 src 还是不显示播放条？
最常见原因是漏了 controls 属性。只写 <audio src="voice.mp3"></audio>，浏览器会加载音频但不渲染任何界面，用户完全感知不到。这不是 bug，是 HTML5 的默认行为。
- 必须显式添加
controls： - 路径必须是相对 URL（如
"./audio/intro.mp3"）或绝对 URL（如"https://cdn.example.com/voice.ogg"），不能是"intro.mp3"或file:///路径 - 双击 HTML 文件本地打开时，Chrome/Firefox 会因安全策略拒绝加载音频；建议用
python -m http.server启一个本地服务再测试
怎么让不同浏览器都能播？MP3 + OGG 双格式是底线
Firefox 默认不支持 MP3，Safari 对 OGG 解码更稳定。只放一个 .mp3，等于主动放弃约 15% 的桌面用户（尤其教育、开源社区场景）。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用
<source></source>提供回退：<audio controls><source src="lesson.mp3" type="audio/mpeg"><source src="lesson.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </source></source></audio>
-
type必须写对："audio/mpeg"（不是"audio/mp3"），"audio/ogg"（不是"audio/ogv"） - Ogg 文件可用
ffmpeg -i input.mp3 -c:a libvorbis output.ogg生成，免费且 Firefox 原生支持
JS 控制播放总报 DOMException: play() failed because the user didn't interact with the document first？
这不是你代码错了，是浏览器强制策略：自动调用 play() 必须由用户手势（click/touchstart）触发，DOMContentLoaded、setTimeout、load 事件里都不行。
- 正确姿势：给按钮绑定 click，再调
audio.play()，例如：document.getElementById('readBtn').addEventListener('click', () => { audio.play().catch(e => console.warn('Playback failed:', e)); }); - 首次播放前建议加
preload="metadata"，避免因元数据未加载导致失败 -
audio.src动态改完后，要手动调audio.load()再play()，否则可能沿用旧缓冲 - iOS Safari 更严：哪怕有 click，若之前从未成功播过，仍可能拒播；可先设
muted=true播一次，之后再取消静音
随文朗读按钮点击没反应？检查是否隐藏了控件又没补 JS 状态监听
去掉 controls 后，<audio></audio> 就成“黑盒”，所有状态（播放中/暂停/加载完成）都得靠 JS 主动监听，漏一项就卡住。
- 必监听
loadeddata：确保音频元数据已就绪，才能安全调play() - 必监听
timeupdate：更新自定义进度条，否则拖拽失效 - 必监听
ended：朗读完自动收起提示、切换下一节，否则用户以为卡死 - 移动端需额外处理 touchstart（不只是 click），iOS 上 click 有 300ms 延迟，可能错过首帧触发时机
真正难的不是写对标签，而是把“用户点一下就朗读当前段落”这件事拆解成加载、解码、触发、反馈、容错五个环节，每个环节浏览器策略都不同。路径、格式、事件时机、静音绕过、移动端 touch 兼容——少踩一个坑，随文朗读就离可用近一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
