<audio>是唯一推荐方案，因<bgsound>和<embed>已被弃用，仅<audio>符合W3C标准、支持ARIA、可事件监听及页面可见性响应；autoplay必须配合muted，且需用户手势解除静音播放。
现代浏览器基本不支持“无声无扰的自动有声背景音乐”，<audio> 是唯一可行且语义正确的方案，但必须配合 muted + 用户交互才能解除静音播放。
为什么 <audio> 是唯一推荐方案
过去用的 <bgsound>（IE 专属）和 <embed> 已被主流浏览器弃用，无标准、无无障碍支持、无法被 JS 可靠控制。只有 <audio> 满足 W3C 标准、支持 ARIA、可监听事件、能响应页面可见性变化。
-
<bgsound>在 Chrome/Firefox/Safari 中完全无效 -
<embed>行为不可预测，移动端常被忽略或静音强制生效 -
<audio>的play()方法返回 Promise，便于错误捕获和降级处理
autoplay 和 muted 必须同时存在
几乎所有桌面/移动端浏览器（Chrome 70+、Safari 12.1+、Firefox 66+）都要求：自动播放仅允许静音媒体。一旦去掉 muted，play() 会直接抛出 NotAllowedError。
- 正确写法：
<audio autoplay muted loop preload="auto"><source src="bgm.mp3" type="audio/mpeg"></audio> - 错误写法：
<audio autoplay loop>—— 即使用户刚点过页面，也会被拦截 -
preload="auto"能提升首次播放响应速度，但会增加初始流量；对小体积 MP3（≤500KB）建议保留
如何让用户真正听到声音
必须由一次明确的用户手势（click/touchstart）触发解除静音并播放，不能靠监听页面加载或定时器。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 绑定按钮：
<button id="unmuteBtn">开启背景音乐</button> - JS 处理：
document.getElementById('unmuteBtn').addEventListener('click', () => { audioEl.muted = false; audioEl.play().catch(e => console.log('播放失败:', e)); }); - 注意：不能在
click回调里先audioEl.muted = false再setTimeout(() => audioEl.play(), 0)—— 浏览器只认“同步上下文中的 play()” - 成功后可保存引用，后续用
audioEl.volume = 0.3控制音量，避免突兀
容易被忽略的兼容性细节
看似简单，但 MP3/Ogg fallback、移动端 Safari 行为、页面切换暂停等细节极易出错。
- 务必提供双格式：
<source src="bgm.mp3" type="audio/mpeg"><source src="bgm.ogg" type="audio/ogg">—— Firefox 对 Ogg 支持更好，iOS Safari 只认 MP3 - 移动端 Safari 有时连
muted autoplay都会失败，建议加preload="metadata"保底 - 切到其他标签页时，
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') audioEl.pause(); })可避免后台耗电 - 若音频用于装饰性场景，加上
aria-hidden="true"，防止屏幕阅读器误读
真正的难点不在代码长短，而在于判断「这个页面是否真的需要背景音乐」——技术上能做到，不等于应该这么做。用户静音、带宽限制、注意力干扰，这些都不是 JS 能绕过的。
