报错信息:
[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(); // ... }