javascript - 如何帮助移动浏览器处理单个页面上的多个 HTML5 音频和视频对象？

Question

我在单个页面上有一个控制台。控制台上的每个按钮(许多按钮中的一个)都将激活一个新的信息面板，该面板从右侧滑入，并且:

• 启动输入序列(每个字符出现在屏幕上并伴有非常短的蜂鸣声 - 每个字符都是一个新的 Audio 对象)；
• 播放新的Audio几秒钟后，超过持续的蜂鸣声
• 播放第二个新的 Audio对象，紧接着，在蜂鸣声的顶部(此点之后不久通常是蜂鸣声结束的地方)
• 开始播放新的 Video蜂鸣声结束后或结束前不久反对

使用笔记本电脑浏览器(Firefox 58 和 Chrome 64)，我可以循环浏览任意数量的滑入式面板，并且视听效果不断出现。

注意 每个新面板滑入都会暂停所有 Audio和Video上一个面板中的对象。

使用 Android 手机上的移动浏览器(Firefox 和 Chrome)，声音效果将在面板 2 或 3 上开始滞后，通常如果我打开第 5 个或第 6 个面板，所有音频和视频都会放弃。

此时javascript将不再创建新的Audio反对也不玩 HTML5 <video>元素。刷新浏览器中的页面也不会给它带来新的生命。事实上，唯一的选择是关闭移动浏览器，然后重新打开它。

我不能确定，但​​我猜测浏览器可能因对象过载而做出响应，拒绝允许更多对象？

为了测试这个理论，而不是:

var beep = new Audio('/beep.mp3');
beep.play;

我尝试过:

// GLOBAL SCOPE

var beeps = [];

// FUNCTION SCOPE

beeps[beeps.length] = new Audio('/.assets/media/audio/fixournhs/beep.mp3');
beeps[(beeps.length - 1)].play();

setTimeout(function(){

    if (beeps.length > 1) {
        beeps[0] = undefined;
        beeps.shift();
    }
}, 600);

但同样的延迟和最终的半关闭也会发生。

这里发生了什么？这绝对是特定于移动设备的，因为我笔记本电脑上的浏览器可以很好地处理该脚本。

Answer 1

试试这个

var beep = new Audio('/beep.mp3');
beep.play;
beep.onended = function(){
    beep.remove() //Remove when played.
  };

这可能有助于浏览器知道在完成后删除您的 Beep 音频对象。

如果测试失败，请尝试使用 document.body.appendChild(audio); 将“beep”实际放入 dom 中；