JavaScript new Audio(audioUrl)报错：[Intervention] Blocked attempt to create a WebMediaPlayer解决方法

报错信息：

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

问题原因：

可能由于之前创建太多Audio对象，没有释放导致的。

解决方法：

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

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

也可以在启动Chrome时 增加参数--max-web-media-player-count=5000，但是普通用户不太适用。

另外，可以使用代码强制清理元素：

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

例如，

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

也可以考虑能否重用Audio/Video元素。

或者

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