阻止创建 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

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

更新： 我不再使用

HTMLAudioElement

而是使用

AudioBufferSourceNode

。这似乎是唯一简单的解决方案，因为 Chrome 团队正在讨论限制它们。 注意： 我们可能需要播放超过 1000 个音频片段。这是参考 chromium 讨论线程，他们将在 2021 年 8 月 5 日的下一个版本中将

webmediaplayers

的数量增加到 1000。

Answer 1

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

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

只有在启动chrome时传递以下标志才能增加数量，例如

--max-web-media-player-count=5000

（当然我们不能期望最终用户这样做）

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

编辑：

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

mediaElement.src = '';
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();
    // ...
  }

Answer 3

是的，我也是，它破坏了我的游戏， 这是我找到的解决方法，希望同时有所帮助：

function playSound(  ) {
    var jump_sound = new Audio("./jump.mp3");
    jump_sound.play();

    jump_sound.onended = function(){
        this.currentSrc = null;
        this.src = "";
        this.srcObject = null;
        this.remove();
    };
}

注意：如果并发声音太多，它仍然会阻塞，但使用此代码，阻塞是暂时的。

Answer 4

Chrome 版本 92.0.4515.131 似乎解决了该问题