如何通过JS实现同一音频同时在多个音频输出设备同步播放

该需求可以在Chrome/Edge浏览器中正常实现，你现有代码无法多设备同时输出是流处理、播放时序两个核心问题导致的。

• 你调用MediaStream.clone()后没有验证流的轨道激活状态，多数情况下克隆的流没有正确挂载原始音频的数据源，导致克隆的audio元素实际没有可播放的内容
• 你直接批量调用play()的逻辑大概率被浏览器自动播放策略拦截，非用户交互触发的多媒体播放请求只会放行第一个
• 没有添加错误捕获逻辑，部分设备setSinkId调用失败时无法感知问题

// 必须在用户交互事件（如click）的回调中执行该逻辑，避免自动播放策略拦截
async function playAudioOnAllOutputs() {
  // 枚举音频输出设备，保留你原有的过滤逻辑
  const outputs = (await navigator.mediaDevices.enumerateDevices())
    .filter(({ kind, deviceId }) => kind === 'audiooutput' && deviceId !== 'default' && deviceId !== 'communications' );
  
  const originalAudios = document.querySelectorAll('audio');
  const playerGroups = [];

  for (const originalAudio of originalAudios) {
    const group = [];
    for (const output of outputs) {
      let player;
      if (group.length === 0) {
        player = originalAudio;
      } else {
        player = originalAudio.cloneNode(true);
        // 兼容src和srcObject两种场景
        if (originalAudio.src) {
          player.src = originalAudio.src;
        } else if (originalAudio.srcObject) {
          player.srcObject = originalAudio.srcObject.clone();
        }
        // 同步初始播放进度
        player.currentTime = originalAudio.currentTime;
      }
      // 设置输出设备，添加错误捕获
      try {
        await player.setSinkId(output.deviceId);
        group.push(player);
      } catch (e) {
        console.error(`设备${output.label}设置输出失败:`, e);
      }
    }
    playerGroups.push(group);
  }

  // 统一触发播放，确保所有实例同时启动
  for (const group of playerGroups) {
    for (const player of group) {
      try {
        await player.play();
      } catch (e) {
        console.error('播放失败:', e);
      }
    }
  }
}

// 示例：绑定到页面按钮的点击事件触发
// document.querySelector('#playBtn').addEventListener('click', playAudioOnAllOutputs);

• 该功能仅支持HTTPS/localhost环境运行，这是setSinkId API的安全限制
• 不要在页面加载完成后自动执行播放逻辑，必须绑定到用户点击、触摸等交互事件的回调中触发
• 如果需要长时间保持播放进度同步，可以添加timeupdate事件监听，实时同步所有同组audio元素的currentTime值

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