Question

我有一个巨大的音频文件，我只想在网页上加载一次，但我在javascript中实例化了2个音频标记对象：

var audioTag1 = new Audio();
var audioTag2 = new Audio();

audio1.src = 'hugeFile.mp3';
audio1.src = 'hugeFile.mp3';

如何让浏览器只提出1个请求？我知道文件是缓存的，但我怀疑浏览器知道缓存2个请求中的任何一个，因为第一个请求的响应头在发出秒请求时尚未到达。这意味着浏览器尚未读取pragma和缓存控制标头。

有没有办法告诉浏览器“请求一次这个数据，然后输出2个音频标签？”而不是发出2个请求？

我想我可以创建一个音频blob，然后构建对象URL？对于这个简单的任务，这可能是太多开销了吗？

Answer 1

var audioTag1 = new Audio();
var audioTag2 = new Audio();

audioTag1.src = 'hugeFile.mp3';

audioTag1.addEventListener("load", function() {
    console.log('audio 1 ready');
    audioTag2.src = 'hugeFile.mp3';
    audioTag2.load();
});

audioTag2.addEventListener("load", function() {
    console.log('audio 2 ready');
});

audioTag1.load();

没有测试，但很确定在第二次请求时，浏览器会检查缓存并发现文件已满载

如何连续制作2个音频元素，但只需要1个音频请求？

1 个答案: