Question

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

启动一个打字序列（每个角色出现在屏幕上并伴有一声非常短的哔声 - 每一个都是一个新的Audio对象）;
在几秒钟之后播放一个新的Audio对象，在正在进行的哔哔声之上。
然后立即播放第二个新的Audio对象，在哔哔声的顶部（此点后不久通常会发出哔哔声）
在哔哔声结束后或在结束前不久开始播放新的Video对象

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

N.B。 每个新面板滑动都会暂停上一个面板中的所有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音频对象。

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

Answer 2

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

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

然后脚本：

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

由于哔哔声在与屏幕上出现的字母完全（或几乎）相同的间隔内重复，因此用户会产生令人信服的印象，即哔哔声与字母相关（因为它们实际上是当声音效果由一系列0.3秒的Audio对象组成时。）

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

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

2 个答案: