返回
创建于
状态公开
写一个通用的清理函数,你只需要传入 <audio> 节点或者选择器,就能完成停止、解绑事件和 DOM 移除:
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}使用示例
1// 通过选择器清理
2cleanAudio('#myAudio');
3
4// 或者直接传入节点
5const audioEl = document.getElementById('myAudio');
6cleanAudio(audioEl);这样能保证:
- 播放停止
- 资源释放
- 事件监听器也会清理掉
- DOM 节点移除