else语句中audioElement1.pause()失效问题求助

问题根源 #

每次点击播放/暂停按钮时，你都会新建一个Audio实例。第一次点击播放时，确实启动了音频；但点击暂停时，你创建的是一个全新的音频对象，调用它的pause()根本无法影响之前正在播放的那个实例——这就是音频停不下来的核心原因。而图片切换是直接操作DOM元素，不受实例创建的影响，所以能正常工作。

修复方案 #

我们需要把每个音频实例缓存起来，避免重复创建，确保暂停操作作用在正在播放的那个实例上。

修改后的JavaScript代码 #

// 缓存所有音频实例，避免重复创建
const audioInstances = {};
// 获取所有播放按钮
const playIcons = document.querySelectorAll(".second-icon");

playIcons.forEach(icon => {
  icon.addEventListener("click", (e) => {
    const songId = e.target.getAttribute("id");
    
    // 仅当该音频实例不存在时才创建
    if (!audioInstances[songId]) {
      audioInstances[songId] = new Audio(`songs/${songId}.mp3`);
    }
    const currentAudio = audioInstances[songId];
    
    // 用includes判断图片状态，避免浏览器自动补全绝对路径导致判断失效
    if (e.target.src.includes("circle-play-regular.png")) {
      e.target.src = "images/circle-pause-regular.png";
      currentAudio.play();
    } else {
      currentAudio.pause();
      // 可选：重置音频到开头，下次点击直接从头播放
      currentAudio.currentTime = 0;
      e.target.src = "images/circle-play-regular.png";
    }
  });
});

额外优化（可选） #

如果需要实现“点击其他歌曲时自动暂停当前播放”的功能，可以添加以下逻辑：

playIcons.forEach(icon => {
  icon.addEventListener("click", (e) => {
    const songId = e.target.getAttribute("id");
    
    if (!audioInstances[songId]) {
      audioInstances[songId] = new Audio(`songs/${songId}.mp3`);
    }
    const currentAudio = audioInstances[songId];
    
    // 暂停所有其他正在播放的音频
    Object.values(audioInstances).forEach(audio => {
      if (audio !== currentAudio && !audio.paused) {
        audio.pause();
        audio.currentTime = 0;
      }
    });
    
    // 把其他按钮的图标切回播放状态
    playIcons.forEach(btn => {
      if (btn !== e.target) {
        btn.src = "images/circle-play-regular.png";
      }
    });
    
    // 处理当前按钮的播放/暂停逻辑
    if (e.target.src.includes("circle-play-regular.png")) {
      e.target.src = "images/circle-pause-regular.png";
      currentAudio.play();
    } else {
      currentAudio.pause();
      currentAudio.currentTime = 0;
      e.target.src = "images/circle-play-regular.png";
    }
  });
});

其他注意点 #

• 原代码中的for (n = 0; n <=9; n++)存在问题：如果DOM中不足10个按钮，会导致icon[n]报错，改用forEach遍历更安全。
• 避免直接用全字符串匹配src属性，因为浏览器可能会自动补全为绝对路径，导致判断失效，改用src.includes()更可靠。

内容的提问来源于stack exchange，提问作者Jatin Duggal