现代浏览器禁止页面自动播放背景音乐，必须通过用户点击等手势触发play()；可借助localstorage记住开关状态，用按钮控制并自定义样式。
现代浏览器根本不允许页面一打开就自动播放背景音乐，直接加 autoplay 属性基本无效，强行写只会报错或静音——这不是你代码错了，是浏览器策略变了。
audio 标签加 autoplay 为什么总是失败？
Chrome、Firefox、Safari 从 2018 年起统一执行「用户手势激活」策略：没有点击、触摸等显式交互，play() 调用必然被拒绝，错误信息通常是 DOMException: play() failed because the user didn't interact with the document first。
以下操作都不可靠：
-
autoplay单独存在（必失败） -
preload="auto"（只影响加载，不解除播放限制） -
autoplay muted（移动端可能生效，但背景乐没声音等于没加）
真正有效的触发点只有一个：用户点击后立刻调用 play()。
怎么让品牌背景乐“可开可关”且记住用户选择？
用一个按钮控制开关，并把状态存进 localStorage，避免每次刷新重置。关键点是：首次播放必须绑定在用户点击事件里，后续操作才可脱离手势上下文。
示例结构：
<audio id="bgm" src="brand-theme.mp3" loop></audio><button id="toggleBgm">开启背景音乐</button>
对应脚本：
const audio = document.getElementById('bgm');
const btn = document.getElementById('toggleBgm');
// 初始化：读取上次状态
const isEnabled = localStorage.getItem('bgmEnabled') === 'true';
if (isEnabled) {
// 注意：这里不能直接 play()，得等用户点过一次才合法
// 所以仅设状态，不执行播放
btn.textContent = '关闭背景音乐';
}
btn.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(e => console.warn('播放被阻止:', e));
localStorage.setItem('bgmEnabled', 'true');
btn.textContent = '关闭背景音乐';
} else {
audio.pause();
localStorage.setItem('bgmEnabled', 'false');
btn.textContent = '开启背景音乐';
}
});
注意：
- 不要在
DOMContentLoaded或window.onload里调play() - 移动端 iOS Safari 更严格，若需“首次点击即响”，可先设
audio.muted = true，调play()，再立刻audio.muted = false（部分机型有效） - 音频文件建议用 MP3 + OGG 双格式兜底，
<source></source>多写一层兼容旧版
要不要隐藏 audio 控件？怎么自定义样式？
企业官网通常不希望显示默认播放条，用 controls 属性会暴露控件；去掉它后，audio 元素默认不可见，但依然可被 JS 控制。
如果需要视觉反馈（比如小喇叭图标），推荐用纯 CSS + JS 模拟开关状态，而不是依赖原生控件。例如：
audio { display: none; }
#toggleBgm::before { content: '?'; }
#toggleBgm.off::before { content: '?'; }
然后 JS 切换 off class 即可。这样既干净，又完全可控。
真正的难点不在怎么写，而在于接受“用户必须主动点一下才能听”这个事实——所有绕过它的尝试，都会在某个浏览器或某次更新后突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
