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

Question

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

启动一个打字序列（每个字符出现在屏幕上并伴有非常短的哔哔声 - 每个都是一个新的 Audio 对象）；
播放一个新的 Audio 对象，几秒钟后，在持续的蜂鸣声之上
播放第二个新的 Audio 对象，紧随其后，超过哔哔声的顶部（此后不久通常是哔哔声结束的地方）
在哔哔声结束后或即将结束前不久开始播放新的 Video 对象

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

N.B. 每个滑入的新面板都会暂停前一个面板中的所有 Audio 和 Video 对象.

在我的 Android Phone（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 音频对象。

如果该测试失败，请尝试将 'beep' 实际放入 dom，并使用 document.body.appendChild(audio);

Answer 2

事实证明 - 通过一些横向思考 - 有一种替代方法可以生成 audio-visual 键入序列，它不需要为每个字母创建一个新的 Audio 对象，因此，不会创建大量导致音频和视觉效果滞后的对象。

关键是要有一个 5 秒的声音效果（即比任何单独的打字序列都长），它会发出一连串的长而重复的哔哔声。

然后脚本：

在字母开始出现的同时 .play() 激活 5 秒的声音文件
在最后一个字母出现后 this.pause(); this.currentTime = 0; 停止 5 秒的声音文件

由于蜂鸣声以与屏幕上出现的字母完全（或几乎）相同的间隔重复，因此给用户一种令人信服的印象，即蜂鸣声与字母相关联（因为它们 实际上 当声音效果由一系列 0.3 秒的音频对象组成时）。

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

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

How to help mobile browsers handle multiple HTML5 audio and video objects on a single page?

html

javascript

html5-video

html5-audio