Javascript 如何帮助移动浏览器在一个页面上处理多个HTML5音频和视频对象？

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

启动一个键入序列，每个字符出现在屏幕上并伴随一声很短的蜂鸣音-每个字符都是一个新的音频对象； 几秒钟后，在持续的嘟嘟声上方播放新的音频对象 播放第二个新的音频对象，紧接着，在发出嘟嘟声后不久，这通常是嘟嘟声结束的地方 在蜂鸣音结束后或在蜂鸣音结束前不久开始播放新的视频对象 使用笔记本电脑浏览器Firefox 58和Chrome 64，我可以循环浏览任意数量的滑入式面板，音频和视频不断出现

注意：每个新面板滑入会暂停前一面板中的所有音频和视频对象

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

此时javascript将不再创建新的音频对象，也不会播放HTML5元素。在浏览器中刷新页面也不会给它带来新的生命。事实上，唯一的选择是关闭手机浏览器，然后重新打开它

我不能确定，但我猜可能是浏览器中的对象太多，并且拒绝允许更多的对象

为了检验这一理论，而不是：

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

但同样的延迟和最终的半停堆也会发生

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

试试这个

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

这可能有助于浏览器在完成后删除您的蜂鸣音对象

---

如果该测试失败，请尝试使用document.body.appendChildaudio将“嘟嘟声”放入dom

事实证明，通过一点横向思考，有一种替代方法可以生成视听打字序列，它不需要为每个字母创建一个新的音频对象，因此也不会创建大量对象，从而导致音频和视觉滞后

关键是要有一个5秒的音效，即比任何一个单独的打字序列都要长，这个序列会发出一长串重复的嘟嘟声

然后，脚本：

在字母开始出现的同时，用.play激活5秒的声音文件 使用此命令停止5秒的声音文件。暂停；这个.currentTime=0；在最后一封信出现之后 由于嘟嘟声的重复间隔与字母出现在屏幕上的间隔完全相同或几乎相同，因此用户会有一个令人信服的印象，即嘟嘟声与字母相关，就像声音效果由一系列0.3秒的音频对象组成时的实际情况一样

---

事实上，播放的5秒声音文件独立于使每个字母按顺序出现的脚本。

谢谢您，另外还有一个感谢您使用结束事件侦听器。我已经尝试过你建议的解决方案和各种各样的变化，但是导致部分崩溃的滞后仍然存在。