返回
创建于
状态公开

写一个通用的清理函数,你只需要传入 <audio> 节点或者选择器,就能完成停止、解绑事件和 DOM 移除:

js
1function cleanAudio(target) {
2  let audio = null;
3
4  // 支持传入选择器字符串 或 DOM 节点
5  if (typeof target === 'string') {
6    audio = document.querySelector(target);
7  } else if (target instanceof HTMLAudioElement) {
8    audio = target;
9  }
10
11  if (!audio) return;
12
13  try {
14    // 停止播放
15    audio.pause();
16
17    // 移除音源并释放资源
18    audio.removeAttribute('src');
19    audio.load();
20
21    // 克隆节点以清理所有事件监听器
22    const cleanClone = audio.cloneNode(true);
23
24    // 替换原来的 audio 节点(会移除监听器)
25    audio.parentNode?.replaceChild(cleanClone, audio);
26
27    // 最后彻底移除
28    cleanClone.remove();
29  } catch (e) {
30    console.error('清理 audio 节点失败:', e);
31  }
32}

使用示例

js
1// 通过选择器清理
2cleanAudio('#myAudio');
3
4// 或者直接传入节点
5const audioEl = document.getElementById('myAudio');
6cleanAudio(audioEl);

这样能保证:

  • 播放停止
  • 资源释放
  • 事件监听器也会清理掉
  • DOM 节点移除