有没有办法检查文件是否在浏览器的缓存中，如果文件不在其中，则只下载它？

Question

我正在制作一个音频沉重的页面。我正在使用JavaScript音频元素。代码如下所示：

JavaScript的：

var x = new Audio("x.mp3");
var y = new Audio("y.mp3");
var z = new Audio("z.mp3");

function playMe(n){
    n.play();
}

HTML：

<button class="button" onclick="playMe(x)")>Play</button>
<button class="button" onclick="playMe(y)")>Play</button>
<button class="button" onclick="playMe(z)")>Play</button>

我正在尝试找到一种保存带宽的方法，我被建议我应该在Web服务器或缓存清单中使用缓存头。这是主题：

How can I reuse the audio a browser already downloaded so it doesn't download it again in other pages that use the same audio file?

有没有办法以JavaScript（或任何其他方式）检查浏览器缓存的内容？目标是实现这样的目标：

if (file in the cache){
    use the file in the cache;
}
else{
    var x = new Audio("x.mp3");
    var y = new Audio("y.mp3");
    var z = new Audio("z.mp3");
}

声明Audio对象时会下载音频文件。

有办法做到这一点吗？