如何移除事件监听器中的音频函数以停止歌曲播放？

当前代码的核心问题是：每个playAudioX函数都创建了局部的Audio实例，播放后根本拿不到引用去停止它。要实现关闭模态框时停歌，得这么改：

1. 统一存好所有音频实例 #

别每次播放都新建局部Audio，搞个全局对象存所有音频实例：

// 全局存储所有音频实例，把对应路径补全就行
const audioInstances = {
  audio1: new Audio("./sounds/Cage-d-Elephant.mp3"),
  audio2: new Audio("./sounds/Colda-War-Kids.mp3"),
  audio3: new Audio("./sounds/[对应foster-the-people的音频路径]"),
  audio4: new Audio("./sounds/[nujabes的音频路径]"),
  audio5: new Audio("./sounds/[omam的音频路径]"),
  audio6: new Audio("./sounds/[senor-loop的音频路径]"),
  audio7: new Audio("./sounds/[tameimpala的音频路径]"),
  audio8: new Audio("./sounds/[blue-stones的音频路径]"),
  audio9: new Audio("./sounds/[默认音频路径]")
};

// 改写playAudio函数，直接用全局实例播放
function playAudio1(){
  audioInstances.audio1.play();
}

function playAudio2(){
  audioInstances.audio2.play();
}

// 其他playAudio3到playAudio9都照这个样子改

2. 写个停所有歌的函数 #

搞个函数一键暂停所有音频，顺便重置到开头：

function stopAllAudio() {
  Object.values(audioInstances).forEach(audio => {
    audio.pause();
    audio.currentTime = 0; // 重置进度，下次播放从头来
  });
}

3. 关闭模态框时调用停歌函数 #

修改模态框的点击事件，关模态的时候触发停歌：

modal.addEventListener("click",(e)=>{
  if(e.target.classList.contains("modal")){
    modal.classList.remove("open");
    popImage.classList.remove("open");
    stopAllAudio(); // 加这行，关模态就停歌
  }
});

关于移除captionAudio(selected_image)的说明 #

要是你只是想点击按钮时不自动播歌，直接删掉按钮点击事件里的captionAudio(selected_image);这行就行。但如果要保留“点按钮播歌、关模态停歌”的功能，就别删这行，配合上面的代码用就行。

内容的提问来源于stack exchange，提问作者Gabo Arosemena