必须添加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% 的桌面用户（尤其教育、开源社区场景）。

• 用 <source></source> 提供回退：

  <audio controls>
    <source src="lesson.mp3" type="audio/mpeg">
    <source src="lesson.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
  </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 事件里都不行。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 正确姿势：给按钮绑定 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 兼容——少踩一个坑，随文朗读就离可用近一步。