如何用JS实现点击触发多音频同时循环播放的音频播放器

你现在写的是单音频顺序播放器，全程只操作1个#audioPlayer音频元素，不管是点击切歌还是音频播完自动切，都是替换这个唯一元素的播放源，同一时间永远只能播1个MP3，当然实现不了多音频同时播放的效果。

要实现多个不同时长MP3同时循环、自然错位的播放效果，核心逻辑调整如下：

• 放弃共用1个音频标签的做法，给播放列表里的每一条MP3资源，都创建独立的Audio实例
• 给每个音频实例开启原生loop属性，单音频播完会自动从头循环，不需要手动监听ended事件写切歌逻辑，不同时长的音频循环周期不一样，自然会产生你要的细微播放差异
• 补充用户交互触发逻辑，绕过浏览器自动播放限制

// 页面DOM加载完成后初始化播放器
$(function() {
  // 存储所有音频实例
  const audioList = [];
  // 遍历播放列表生成独立音频实例
  $("#playlist li a").each(function(_, link) {
    // 为当前MP3创建独立音频对象
    const audio = new Audio(link.href);
    // 开启单音频自动循环
    audio.loop = true;
    // 可按需设置单条音频的基础音量，避免多音频叠加后音量过大
    audio.volume = 0.5;

    // 绑定列表项点击事件，手动控制单条音频的播放/暂停
    $(link).parent().on('click', function(e) {
      e.preventDefault();
      if (audio.paused) {
        audio.play();
        $(this).addClass("current-song");
      } else {
        audio.pause();
        $(this).removeClass("current-song");
      }
    })

    audioList.push(audio);
  })

  // 全局启动按钮：点击后同时启动所有音频
  $("#playAllBtn").on('click', function() {
    audioList.forEach((audio) => {
      // 可选：给每个音频加0-3秒随机延迟启动，模拟更自然的错落效果
      const randomDelay = Math.floor(Math.random() * 3000);
      setTimeout(() => {
        audio.play().catch(err => {
          console.log("音频启动失败，请手动点击对应列表项播放", err);
        })
      }, randomDelay)
    })
    // 给所有列表项加上播放中的样式
    $("#playlist li").addClass("current-song");
  })
})

所有主流浏览器都有自动播放限制：页面首次加载、没有产生任何用户点击/交互行为时，JS主动调用play()会被直接拦截，必须通过用户手动点击按钮、点击列表项的操作来触发音频播放，否则会没有声音。

你页面里原来的单个<audio id="audioPlayer">标签、旧的ended事件监听切歌逻辑都可以删掉，loop属性已经原生支持单音频无限循环，不需要自己写切歌代码。

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