我在单个页面上有一个控制台。控制台上的每个按钮(许多按钮中的一个)都将激活一个新的信息面板,该面板从右侧滑入,并且:
- 启动输入序列(每个字符出现在屏幕上并伴有非常短的蜂鸣声 - 每个字符都是一个新的
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);
但同样的延迟和最终的半关闭也会发生。
这里发生了什么?这绝对是特定于移动设备的,因为我笔记本电脑上的浏览器可以很好地处理该脚本。
最佳答案
试试这个
var beep = new Audio('/beep.mp3');
beep.play;
beep.onended = function(){
beep.remove() //Remove when played.
};
这可能有助于浏览器知道在完成后删除您的 Beep 音频对象。
如果测试失败,请尝试使用 document.body.appendChild(audio); 将“beep”实际放入 dom 中;
关于javascript - 如何帮助移动浏览器处理单个页面上的多个 HTML5 音频和视频对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48867240/