现代浏览器默认拦截 autoplay，需 muted 才可能静音播放；最可靠方式是绑定 click/touchstart 事件同步调用 play() 并捕获错误，iOS 还需 playsinline。
autoplay 属性单独写基本没用
现代浏览器（Chrome、Firefox、Safari、Edge）从 2018 年起默认拦截 autoplay，除非音频处于「静音上下文」或用户已完成显式交互。直接在 <audio></audio> 标签里写 autoplay，大概率静音、不播、控制台报错：DOMException: play() failed because the user didn't interact with the document first。这不是代码写错了，是浏览器策略——防止页面一打开就“吓人一跳”。
必须加 muted 才可能触发 autoplay
如果真想“页面加载即播”，唯一被广泛支持的妥协方案是：同时设置 autoplay 和 muted 属性。例如：
<audio src="bgm.mp3" autoplay muted loop></audio>
这样在多数桌面 Chrome 和部分 Android 浏览器中能静音播放；但注意：
- iOS Safari 对
muted autoplay也限制严格，常直接拒绝 - 用户仍需手动取消静音才能听到声音，体验割裂
-
preload="auto"不影响 autoplay 是否成功，只影响资源何时开始下载
最可靠的方式：用 click/touchstart 触发 play()
真正跨平台、可预测、用户可控的做法，是把 play() 调用绑定到用户手势事件上。不能包在 setTimeout、Promise.then 或 DOMContentLoaded 里，必须是事件回调中的同步调用。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
关键点：
- 监听任意一次
click或touchstart（推荐用document.addEventListener('click', ...)，避免按钮未渲染就绑定失败） - 调用前先设
audio.muted = false（如果之前为静音） - 必须用
.catch()捕获拒绝，否则控制台会持续报NotAllowedError - iOS Safari 要求额外加
playsinline属性，否则可能跳转全屏播放器
示例片段：
const audio = document.getElementById('bgm');<br>document.addEventListener('click', () => {<br> audio.muted = false;<br> audio.play().catch(e => console.warn('播放失败:', e));<br>}, { once: true });
loop 和 preload 的实际作用别搞混
loop 只在音频成功播放后才生效；如果 play() 被拦截，loop 就是摆设。而 preload 是纯加载策略，和能否自动播完全无关：
-
preload="metadata"：只下时长、封面等信息，适合大文件或列表页预览 -
preload="none"：等用户点播才发起请求，首播延迟明显 -
preload="auto"：浏览器自行决定是否全量预加载，不是“强制加载”
移动端尤其要注意：有些安卓 WebView 在用户点击后仍拒绝取消静音，这时得接受“首次必静音”，或改用 Web Audio API + 空白音频初始化上下文——那是另一层复杂度了。
