必须由用户显式交互事件同步触发audio.play()，预加载Audio实例并复用，跳转前重置currentTime=0，SPA中需主动pause()；Safari需检查readyState≥2并禁用autoplay。
页面跳转时触发音效播放，play() 被静音策略拦截怎么办
现代浏览器（Chrome、Edge、Safari）默认禁止自动播放音效，除非用户已与页面有交互（如点击）。直接在 window.location.href = '...' 前调用 audio.play() 几乎必然失败，控制台报错 DOMException: play() failed because the user didn't interact with the document first。
解决核心：音效必须由**用户显式触发的事件**（如 click、touchstart）同步驱动，不能延迟到跳转逻辑里。
- 把
audio.play()放在按钮的onclick或事件监听器最开头，且不能加setTimeout或 Promise 延迟 - 跳转动作（如
location.assign()）放在play()之后，但需注意：部分浏览器在play()返回 Promise 时，得等它 resolve 再跳转才稳妥 - 音效文件建议用
.mp3或.ogg，避免.wav因体积大导致加载慢、play()拒绝执行
Audio 实例该挂哪？全局变量还是每次新建
复用 Audio 实例比每次 new Audio(src) 更可靠——后者在 Safari 中容易因资源未缓存而触发静音策略，且重复创建可能堆积解码开销。
推荐做法：页面初始化时预加载一次，绑定到 window 或模块级变量，后续只调 play() 和 currentTime = 0 重置。
立即学习“前端免费学习笔记（深入）”；
- 避免写
const audio = new Audio('click.mp3'); audio.play();在跳转函数里——这是最常见失效写法 - 正确示例：
const clickSound = new Audio('click.mp3');<br>document.getElementById('go-btn').addEventListener('click', () => {<br> clickSound.currentTime = 0;<br> clickSound.play().catch(e => console.warn('音效播放被拒:', e));<br> location.href = '/next-page';<br>}); - 如果多个按钮需要不同音效，分别预建实例，不要共用一个
src
跳转后音效还在播？怎么确保不跨页残留
页面跳转时，当前页 DOM 销毁，Audio 实例自然释放，一般不会“跨页播放”。但若用了 history.pushState() 或单页应用（SPA）路由，则音频可能持续——因为页面没刷新，实例还活着。
这时候要主动控制：在路由切换前暂停或销毁。
- SPA 场景下，在
beforeEach（Vue Router）或useEffect清理（React）中调用audio.pause(); audio.currentTime = 0; - 不用
audio.remove()或delete，没意义；pause()+currentTime = 0就够了 - 如果音效是背景循环类，跳转前暂停；如果是瞬时反馈（如按钮音），播完就不管，无需手动 stop
Safari 对 Audio 的额外限制和绕过点
Safari（尤其是 iOS）比 Chrome 更激进：即使用户点过按钮，如果之后页面有长时间无交互，或音效文件没完全加载完，play() 仍可能被拒。它还要求音效必须“可解码”，即 audio.readyState >= 2。
实操上多加一层保险：
- 加载时监听
canplay或loadedmetadata，确保就绪再允许用户操作（比如按钮初始disabled） - 播放前检查：
if (audio.readyState >= 2) audio.play(); else console.warn('音频未就绪'); - 避免用
autoplay="true"属性——它在所有浏览器里都基本无效，还可能干扰手动播放逻辑 - iOS 上不要依赖
play()返回的 Promise，有些旧版本根本不返回，直接用try/catch包住更稳
click、没等 canplay，就全白搭。 
