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

Question

我有一个巨大的音频文件，我只想在网页上加载一次，但我在 javascript:[=11= 中实例化了 2 个音频标签 objects ]

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

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

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

有没有办法告诉浏览器"Request this data once, and make 2 audio tags out it?"而不是发出 2 个请求？

我想我可以创建一个音频的 blob，然后构建 object 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 个请求？

How can I make 2 audio elements in succession, but make just 1 request for the audio?

javascript

audio

caching