动态切换HTML5音频需先改src再调load()，否则不重载；建议pause()后操作，用canplaythrough事件判断可播，preload="none"节省资源；iOS/微信需用户手势触发首次播放。
直接改 src 属性就能换音频，但必须调用 load()
HTML5 的 标签支持动态切换音频，核心是：修改 src 后必须显式调用 load() 方法，否则浏览器不会重新加载新资源，播放可能卡在旧音频或静音。
- 只改
src不调load()→ 大部分浏览器（Chrome/Firefox/Safari）不会自动重载，play()可能失败或无反应 - 调了
load()之后可立即play()，但需注意 Promise 状态和用户手势限制（如 iOS Safari 要求首次播放由用户点击触发） - 若音频已播放中，建议先
pause()再改src+load()，避免状态混乱
canplaythrough 事件比 loadeddata 更适合判断“可稳定播放”
切换音频后想等加载完成再自动播放，别只监听 loadeddata——它只表示第一帧可用，网络波动下仍可能卡顿。用 canplaythrough 更稳妥，它表示浏览器预估后续能连续播放不中断。
-
loadeddata：首帧解码完成，太快，不可靠 -
canplaythrough：有足够缓冲，适合自动播放逻辑 - 每次切换都要重新绑定事件（或用事件委托），因为
load()会清空之前注册的事件监听器
function switchAudio(src) {
audio.pause();
audio.src = src;
audio.load();
// 移除旧监听，避免重复绑定
audio.removeEventListener('canplaythrough', onCanPlay);
audio.addEventListener('canplaythrough', onCanPlay);
function onCanPlay() {
audio.play().catch(e => console.log('播放失败:', e));
}
}
多个音频频繁切换时，preload="none" 可减少内存占用
默认 preload="metadata" 会预加载音频头信息，但若列表很长、用户只是快速试听，预加载反而浪费带宽和内存。设为 preload="none" 后，只有调用 load() 才真正发起请求，更可控。
-
preload="auto"：可能提前加载整个文件，不适合大音频或多曲目场景 -
preload="metadata"：默认值，加载时长、封面等，但对切换性能影响小 -
preload="none"：最轻量，适合“点播即加载”，但首次播放延迟略高 - 注意：Safari 在某些版本中会忽略
preload="none"，强制加载元数据
iOS Safari 和微信内置浏览器的静音/自动播放限制必须手动处理
在 iOS Safari 和大部分安卓微信 WebView 中，play() 必须由用户真实点击触发，且页面未被静音。单纯 JS 调用（比如 setTimeout 或事件回调里）大概率失败。
立即学习“前端免费学习笔记（深入）”；
- 首次播放务必绑定在用户点击事件内（哪怕只是空 click handler），建立播放上下文
- 后续切换可复用该上下文，但若页面长时间无交互，iOS 可能重置状态，需再次捕获用户操作
- 微信中可加
document.addEventListener('touchstart', ...)做兜底，但不能保证 100% 生效 - 不要依赖
autoplay属性，它在这些环境基本无效
复杂点在于：不是所有设备行为一致，尤其微信 Android 和 iOS 微信差异很大；最容易被忽略的是——你以为切换成功了，其实 play() 被静默拒绝，控制台也不报错，只返回一个 rejected Promise。
