JavaScript中点击播放新音乐时如何停止当前正在播放的音乐

• audioplay实例声明在点击事件回调内部，每次点击都会生成全新的Audio对象，无法获取之前正在播放的音频实例，根本无法触发上一首的暂停逻辑
• 仅通过duration > 0判断音频是否在播放不可靠：音频未完成元数据加载时duration值为NaN，且暂停后不重置播放进度的话，下次触发会从暂停位置续播
• currentSong变量声明在回调内部，每次点击都会被重置为0，无法记录当前实际播放的曲目索引

// 音频实例、当前播放索引移到事件外，全局仅维护一份
let audioplay = null;
let currentSong = 0;

$("body").delegate(".playFreeBeat", "click", function (e) {
  // 新音频播放前，先停止现有正在播放的音频
  if (audioplay) {
    audioplay.pause();
    audioplay.currentTime = 0; // 重置播放进度到开头，避免残留
  } else {
    // 首次点击时创建唯一的Audio实例
    audioplay = new Audio();
  }

  // 替换为你实际的曲目获取逻辑，示例默认取arraySong[0]
  const targetSrc = "./freeAudio/" + arraySong[0].songFiles;
  // 点击同一首歌时切换播放/暂停，不重复加载资源
  if (audioplay.src === location.origin + targetSrc) {
    audioplay.paused ? audioplay.play() : audioplay.pause();
    return;
  }

  // 加载并播放新音频
  audioplay.src = targetSrc;
  audioplay.load();
  audioplay.play().catch(err => {
    // 捕获浏览器自动播放限制等场景的报错
    console.log("播放异常:", err);
  });
});

• 全局只保留一个Audio实例，所有播放控制都针对这个实例执行，从根源避免重复创建对象导致的控制失效
• 每次触发播放时优先执行暂停+进度重置操作，确保上一首音频完全停止后再加载新内容
• 增加同曲目播放状态切换判断，减少不必要的资源加载
• 补充播放异常捕获，适配现代浏览器的自动播放权限规则

内容的提问来源于stack exchange，提问作者Chris Sigo