现代浏览器禁止audio.src动态修改后自动播放，因需用户交互授权；必须在点击等事件回调中同步调用play()，且autoplay对动态src无效。
audio.src 修改后不自动播放？检查 autoplay 和用户交互限制
HTML 中直接修改 audio.src 后调用 play()，大概率会失败并抛出 NotAllowedError。这不是代码写错了，而是现代浏览器（Chrome、Edge、Safari）强制要求：自动播放仅允许在用户有明确交互（如点击、触摸）后的上下文中触发。
常见错误现象：audio.src = 'next.mp3'; audio.play(); 在页面加载后立即执行 → 静音、无响应、控制台报错。
- 必须在用户事件回调中执行
play()，例如button.addEventListener('click', () => { audio.src = 'x.mp3'; audio.play(); }) -
autoplay属性在动态改src后不会重新生效；它只对初始加载起作用 - 即使设置了
muted，部分 Safari 版本仍可能拒绝自动播放，建议显式调用play()并捕获 Promise 拒绝
切换音频时如何避免“暂停-加载-卡顿”？预加载 + canplay 事件监听
直接赋值 src 再调用 play()，音频会从头开始加载，期间 audio 处于 paused 状态，直到元数据或首帧就绪。用户感知就是“点一下，等半秒才出声”。
更顺滑的做法是：提前创建新 Audio 实例，设置 preload='metadata' 或 'auto'，监听 canplay，就绪后再替换当前播放源。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const nextAudio = new Audio();
nextAudio.preload = 'metadata';
nextAudio.src = 'next.mp3';
nextAudio.addEventListener('canplay', () => {
currentAudio.src = nextAudio.src; // 触发重载
currentAudio.currentTime = 0;
currentAudio.play().catch(e => console.warn('play failed:', e));
});
- 不要复用同一个
Audio实例反复设src—— 它内部状态（如readyState、buffered）可能残留旧资源信息 -
preload='metadata'足以获取时长和基本元数据，比'auto'更轻量，适合列表切换场景 - 注意：
canplay不代表音频已缓冲足够播放，如需无缝，应监听canplaythrough，但会延迟触发
多个音频文件切换时，怎么防止内存泄漏或请求堆积？主动 abort 旧请求
频繁修改 src 时，浏览器可能仍在后台加载前一个 URL。若用户快速连点“下一首”，旧请求未完成就被丢弃，但连接未关闭，尤其在 HTTP/1.1 下可能占满并发连接数（Chrome 默认同域 6 个），导致后续资源加载阻塞。
解决方式不是靠猜，而是用 Audio 的 load() 方法配合 abort() 显式中断：
if (currentAudio.src) {
currentAudio.load(); // 重置加载状态，中止当前请求
}
currentAudio.src = 'new.mp3';
currentAudio.play();
-
load()会将readyState重置为 0，并终止正在进行的网络请求（实测 Chrome/Firefox 支持） - 避免在
src未变时重复调用load()，否则可能意外清空已缓冲内容 - 如果使用
fetch+URL.createObjectURL()加载音频 blob，务必在切换前调用URL.revokeObjectURL()
Safari 上 audio 切换失败的典型表现和绕过点
Safari 对自动播放限制最严格：不仅禁止无交互 play()，还可能拒绝在 setTimeout、Promise.then 等异步微任务中触发的播放，哪怕该 Promise 是用户点击后立即 resolve 的。
关键绕过点：所有播放操作必须在原生事件处理函数的同步执行路径中完成，不能跨 Tick。
- ✅ 正确：
button.onclick = () => { audio.src = 'x.mp3'; audio.play(); } - ❌ 错误：
button.onclick = () => setTimeout(() => audio.play(), 0)或button.onclick = () => Promise.resolve().then(() => audio.play()) - 如果逻辑复杂必须异步，可先在点击时调用一次空
play()（返回 Promise），待其 resolve 后再设src并再次play()—— Safari 会记住这次“授权”
这个限制没有银弹，只能按 Safari 的规则来。一旦漏掉，就表现为静音、控制台无报错、但 play() 返回的 Promise 永远 pending。
