javascript - ファイルがブラウザのキャッシュにあるかどうかを確認し、キャッシュにない場合にのみダウンロードする方法はありますか?

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 サーバーのキャッシュ ヘッダーまたはキャッシュ マニフェストのいずれかを使用するよう提案されました。スレッドは次のとおりです。

ブラウザーが既にダウンロードした音声を再利用して、同じ音声ファイルを使用する他のページで再度ダウンロードしないようにするにはどうすればよいですか?

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 オブジェクトが宣言されると、オーディオ ファイルがダウンロードされます。

これを行う方法はありますか？