html5audio标签多音频切换怎么实现_动态src属性修改操作【汇总】_技术教程

动态切换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));
  }
}