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

本文主要介绍JavaScript中,使用new Audio(audioUrl)创建播放音频,报错:[Intervention] Blocked attempt to create a WebMediaPlayer as there are too many WebMediaPlayers already in existence. See crbug.com/1144736#c27的解决方法。

报错信息:

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

推荐阅读
cjavapy编程之路首页