如何重用浏览器已经下载的音频，使其不会在使用相同音频文件的其他页面中再次下载？答案

【问题标题】：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?如何重用浏览器已经下载的音频，使其不会在使用相同音频文件的其他页面中再次下载？
【发布时间】：2012-09-23 09:51:09
【问题描述】：

我正在制作一个音频重页。我正在使用 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>

有些页面使用多达 30 个不同的音频文件，因此这会消耗大量带宽。这可能会扼杀该项目，因为这是一项几乎没有预算的单人工作。

每次声明音频对象时都会下载音频。有没有办法将已经下载到其他页面的音频重复使用到其他页面而不用再次下载？

感谢您的宝贵时间。

【问题讨论】：

除非你的页面是ajaxify，否则没有办法。但是，如果您在网络服务器中为音频文件设置了正确的缓存标头，那么浏览器应该从其浏览器缓存中获取它，避免下载两次。（我不确定这是否也适用于音频实例）

标签： javascript html audio web reusability

【解决方案1】：

您可以使用Cache manifest 确保您想要的每个资源只下载一次并正确缓存，即使是离线浏览也是如此。请参阅："Offline": What does it mean and why should I care? 在 HTML5Rocks 上。

您可以用来代替（或补充）适当缓存的另一件事是让您的页面不会真正重新加载，而是使用 AJAX 仅重新加载部分页面，例如 this simple demo。很多 JavaScript 框架，如 jQuery、YUI、Prototype、Dojo 等都可以帮助您。

【讨论】：