javascript - 如何连续制作 2 个音频元素，但只发出 1 个音频请求？

Question

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

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

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

如何让浏览器只发出 1 个请求？我知道文件已被缓存，但我怀疑浏览器是否知道缓存两个请求中的任何一个，因为第一个请求的响应 header 在发出秒请求时尚未到达。这意味着浏览器尚未读取编译指示和缓存控制 header 。

有没有办法告诉浏览器“请求一次该数据，并制作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();

没有测试，但非常确定在第二次请求时，浏览器将检查缓存并发现文件已完全加载