嵌入双Bandcamp播放器触发DOMException：play请求被pause中断求助

我确实碰到过这个问题！当页面里嵌入多个Bandcamp iframe播放器时，快速切换播放操作（点击一个播放器播放后立刻点另一个）会触发Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()错误，最终导致两个播放器都停止播放。而且正如你发现的，Bandcamp自己的官方页面也存在同样的问题，这说明这大概率是Bandcamp嵌入式播放器自身的内部逻辑bug。

问题原因推测 #

这类错误一般源于播放器之间的全局音频控制冲突：当你触发第二个播放器的play()方法时，第一个播放器的暂停逻辑可能在异步执行，刚好打断了第二个播放器的播放请求。Bandcamp的嵌入式播放器可能共享了全局音频状态管理机制，或者iframe之间的消息通信存在时序问题，导致快速操作下出现竞态条件。

临时解决思路 #

虽然我们无法直接修改Bandcamp播放器的内部代码，但可以尝试在前端层面做一些操作拦截来缓解问题：

• 给播放器添加点击防抖：可以在iframe外层加一个遮罩层，监听遮罩的点击事件，在点击后短暂禁用其他播放器的点击权限，避免快速连续触发操作；
• 手动管控播放状态：通过postMessage向Bandcamp播放器发送控制指令（Bandcamp支持部分嵌入式播放器的消息控制），当检测到一个播放器开始播放时，主动调用另一个播放器的暂停指令，确保操作顺序。

举个简单的遮罩防抖示例（伪代码）：

const playerFrames = document.querySelectorAll('iframe[src*="bandcamp.com/EmbeddedPlayer"]');
let isOperationLocked = false;
const lockDuration = 500;

playerFrames.forEach(frame => {
  const clickOverlay = document.createElement('div');
  clickOverlay.style.cssText = 'position:absolute;inset:0;z-index:10;opacity:0;cursor:pointer;';
  frame.parentElement.style.position = 'relative';
  frame.parentElement.appendChild(clickOverlay);
  
  clickOverlay.addEventListener('click', () => {
    if (isOperationLocked) return;
    isOperationLocked = true;
    // 向播放器发送播放指令
    frame.contentWindow.postMessage({ command: 'play' }, 'https://bandcamp.com');
    setTimeout(() => {
      isOperationLocked = false;
    }, lockDuration);
  });
});

注意：跨域场景下postMessage的目标域名要准确，且Bandcamp播放器对指令的支持情况需要结合官方文档调整，实际使用时可能需要测试验证。

最终建议 #

既然这个问题在Bandcamp官方页面也存在，说明这是他们的产品层面bug，最有效的解决方式是通过Bandcamp的官方支持渠道反馈该问题，等待官方修复。

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