已阻止创建 WebMediaPlayer 的尝试，因为已经存在太多 WebMediaPlayer

Question

我们正在浏览器中开发一种类似数字音频工作站的东西。我们需要在一个选项卡中处理多个音频文件。我们new Audio(audioUrl)过去可以在我们自己的混音器中播放音频。到目前为止，它一直在为我们工作。

使用最新版本的 Chrome (92)，我们遇到了上面的代码片段导致以下错误的问题：

[Intervention] Blocked attempt to create a WebMediaPlayer as there are too many WebMediaPlayers already in existence. See crbug.com/1144736#c27

我无法访问提供的错误链接，它说权限被拒绝。是否有建议的解决方法来处理这个问题？

更新： 我不再使用HTMLAudioElementto AudioBufferSourceNode。似乎是唯一直接的解决方案，因为 Chrome 团队正在讨论无论如何都要限制它们。注意：我们可能需要播放 1000 多个音频剪辑。这是参考铬讨论线程，他们将在webmediaplayers2021 年 8 月 5 日的下一个版本中将 的数量增加到 1000。

Answer 1

Chrome 92 引入了可以在特定选项卡中分配的音频和视频标签数量的限制。桌面浏览器为 75，移动浏览器为 40。

目前唯一的解决方案是限制在页面中创建的音频和视频标签的数量。尝试重用已分配的音频/视频元素。

例如，只能通过在启动chrome时传递以下标志来增加数量--max-web-media-player-count=5000 （当然我们不能期望最终用户这样做）

相关源代码在这里：https : //chromium-review.googlesource.com/c/chromium/src/+/2816118

编辑：

在取消分配音频/视频元素设置之前，以下似乎强制清理元素。

mediaElement.remove();
mediaElement.srcObject = null;

Answer 2

const MaxWebMediaPlayerCount = 75;

class VideoProducer {
  static #documentForVideo

  static createVideo() {
    if (!this.#documentForVideo || this.#documentForVideo.videoCount === MaxWebMediaPlayerCount) {
      const iframeForVideo = document.body.appendChild(document.createElement('iframe'));
      iframeForVideo.style.display = 'none';
      iframeForVideo.contentDocument.videoCount = 0;
      this.#documentForVideo = iframeForVideo.contentDocument;
    }
    this.#documentForVideo.videoCount++;
    const video = this.#documentForVideo.createElement('video');
    return video;
  }

  foo() {
    const video = VideoProducer.createVideo();
    // ...
  }