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