Blocked attempt to create a WebMediaPlayer as there are too many WebMediaPlayers already in existence

Question

We are working on a Digital Audio Workstation kind of thing in the browser. We need to work with multiple audio files in a tab. We use new Audio(audioUrl) to be able to play the audio in our own audio mixer. It has been working for us up to now.

With the latest version of Chrome (92), we have the problem where the above code snippet causes the following error:

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

I cannot access the bug link provided, it says permission denied. And is there a suggested workaround to handle this?

UPDATE: I moved away from using HTMLAudioElement to AudioBufferSourceNode. Seems like the only straightforward solution as Chrome team is discussing to limit them anyway. Note: We may need more than 1000 audio clips to be played back. This is in reference to the chromium discussion thread where they are going to increase the number of webmediaplayers to 1000 on the next release for August 5 2021.

Answer 1

Chrome 92 has introduced a limit on number of audio and video tags that can be allocated in a particular tab. 75 for desktop browsers and 40 for mobile browsers.

For now the only solution is to limit the number of audio and video tags created in the page. Try reusing the already allocated audio / video elements.

The number can only be increased by passing the following flag when starting up chrome, for example --max-web-media-player-count=5000 (Of course we cannot expect the end user to do this)

Related Source code here: https://chromium-review.googlesource.com/c/chromium/src/+/2816118

Edit:

Before deallocating the audio/video elements setting the following seems to force clean up of the element.

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

Yeah me too it broke my game, This is what I found as a workaround, hope this helps in the mean time:

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();
    };
}

Note: it still blocks if there's too many concurrent sound but with this code in place the blocking is temporary.

Answer 4

Chrome version 92.0.4515.131 seems to resolve the issue