autoplay在现代浏览器中基本无效，因Chrome、Firefox、Safari自2018年起强制执行自动播放策略：有声媒体必须由用户手势（如点击）触发，否则play()会报DOMException错误；静音（muted）可绕过限制，但背景音乐需用户交互后恢复声音并持久化状态。
autoplay 属性在现代浏览器里基本无效——不是你写错了，是浏览器主动拦截了。
为什么 autoplay 不起作用？
- Chrome、Firefox、Safari（含 iOS）从 2018 年起统一执行媒体自动播放策略：有声音的媒体必须由用户手势（如点击、触摸）触发才能播放。
- 即使写了
autoplay、loop、preload="auto"，只要没静音且没用户交互，play()调用会直接被拒绝，控制台报错类似：DOMException: play() failed because the user didn't interact with the document first. -
muted="true"可绕过限制实现自动播放，但背景音乐一旦静音就失去意义。
怎么让背景音乐“看起来”自动播放？
核心思路是：等用户第一次交互后，立刻调用 play()，并记住状态。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用一个显式按钮（如悬浮播放图标）或页面任意可点击区域作为触发点
- 第一次点击后调用
audio.play()，同时设audio.muted = false - 用
localStorage记住用户偏好，后续访问跳过提示
<audio id="bgm" src="music.mp3" preload="auto"></audio>
<button id="playBtn">▶ 播放背景音乐</button>
<p><script>
const audio = document.getElementById('bgm');
const btn = document.getElementById('playBtn');</p><p>// 尝试恢复播放（仅在用户交互后有效）
btn.addEventListener('click', () => {
audio.muted = false;
audio.play().catch(e => console.warn('播放被拒:', e.message));
btn.remove(); // 点过就隐藏按钮
});</p><p>// 可选：监听键盘空格键作为备用触发
document.addEventListener('keydown', e => {
if (e.code === 'Space' && !audio.paused) {
e.preventDefault();
audio.play().catch(() => {});
}
});
</script>移动端特别注意哪些坑？
- iOS Safari 对
play()极其严格：即使页面已获得焦点，也必须在用户手势回调内同步调用，不能延迟、不能进 Promise.then、不能用 setTimeout 包裹。 - 音频文件路径必须是 HTTPS（HTTP 页面在 iOS 上无法加载音频）。
- 不要用
visibilitychange或focus事件试图“续播”——iOS 不允许，且用户可能已切走并关闭标签页。 -
audio.volume = 0.3推荐设为 0.2–0.4，避免突然高音吓人；别依赖volume=0来“伪装自动播放”，那等于没播。
背景音乐该不该默认开启？
不该。WCAG 2.1 明确要求：自动播放音频必须可控、可关闭、时长 ≤3 秒。真实背景音乐通常远超此限，因此必须默认关闭，由用户主动开启。
更现实的做法是：加一个带图标的固定悬浮按钮（右下角），默认隐藏音频，点击后播放，并把状态存进 localStorage。这样既合规，又不破坏体验。
真正难的不是怎么播，是怎么在不惹恼用户的前提下，让他们愿意点一下。
