根本原因是audio元素未加载进DOM导致document.getElementById()返回null；解决办法是将script标签移至/body前或用DOMContentLoaded事件监听确保DOM就绪。
按钮点击时 audio.pause() 报错 Cannot read property 'pause' of null
根本原因是脚本执行时 audio 元素还没加载进 DOM，document.getElementById() 返回 null。
解决办法只有两个：把 <script> 标签放到 </body> 前；或者用事件监听确保 DOM 就绪：
window.addEventListener('DOMContentLoaded', () => { /* 获取 audio 并绑定按钮 */ })- 别在
<head>里直接执行获取逻辑 - 确认
<audio id="bgm">的id和 JS 里写的完全一致（区分大小写）
为什么点了“播放”按钮没反应，但“暂停”按钮能用
这是浏览器自动播放策略的典型表现：play() 被拦截，pause() 却始终可用。
现代浏览器（Chrome、Safari、Edge）要求 play() 必须由用户手势（click/touchend）直接触发，且不能静音——但 pause() 没这限制。
立即学习“前端免费学习笔记（深入）”；
所以正确写法不是分开写两个按钮，而是用一个切换按钮：
- 检查
audio.paused：为true才调play()，否则调pause() - 对
play()加.catch(e => console.warn('Play failed:', e))，常见错误是NotAllowedError - 首次播放前别设
muted=false，iOS Safari 会直接拒绝；可先muted=true+autoplay，用户点一次再muted=false
多个音频按钮共用一套 JS 时，常出现“只控制第一个”或“全失效”
问题根源通常是 HTML 中重复用了相同 id（比如所有 <audio> 都写 id="bgm"），或者 JS 里用全局变量反复覆盖 audio 实例。
推荐解法是放弃 id，改用数据属性驱动：
- 每个按钮加
data-audio-src="xxx.mp3"，不依赖id - JS 里统一创建一个
const currentAudio = new Audio()实例，每次点击先currentAudio.src = btn.dataset.audioSrc，再currentAudio.play() - 这样既避免 ID 冲突，又节省内存（不用为每个音频建 DOM 节点）
iOS Safari 上背景音乐一划出页面就停，怎么续播
不能续播。这是系统级限制，不是代码能绕过的。
iOS Safari 在页面进入后台（切到其他 App 或锁屏）时，会强制中断所有音频，且 visibilitychange 事件可能不触发或延迟，靠它监听并重播不可靠。
实际能做的只有两件事：
- 首次播放必须由真实用户点击（
click或touchend），中间不能穿插setTimeout或 Promise.then - 按钮文案明确写“点此开启背景音乐”，别让用户误以为会自动循环播放
移动端所谓“背景音乐”，本质只是前台交互音乐——页面不可见，音频就该被设计为停止，而不是试图恢复。
