如何重新使用已下載的瀏覽器的音頻，使其不會在使用相同音頻文件的其他頁面中再次下載它？

我正在製作一個音頻重頁。我正在使用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個不同的音頻文件，因此這將消耗大量帶寬的。這可能會毀掉這個項目，因爲這是一個幾乎沒有預算的單人努力。

每次聲明音頻對象時，都會下載音頻。有沒有辦法重複使用其他頁面中已下載的音頻，而無需再次下載？

謝謝你的時間。

來源

2012-09-23 Rob

除非你的頁面是* ajaxify *，否則沒有辦法。但是，如果您在您的Web服務器中爲您的音頻文件設置了正確的緩存標頭，那麼瀏覽器應該從瀏覽器緩存中獲取它，避免將其下載兩次。（我不確定這是否也適用於音頻實例） – Alexander

您可以使用Cache manifest來確保您需要的每個資源只下載一次並正確緩存，即使是用於脫機瀏覽。請參閱：HTML5Rocks上的"Offline": What does it mean and why should I care?。

另一件事，你可以使用，而不是正確的緩存（或除了正確的緩存）是讓你的頁面不真正重新加載，但只有部分使用AJAX重新加載，如this simple demo。很多JavaScript框架，比如jQuery，YUI，Prototype，Dojo等都會幫助你。

來源

2012-09-23 09:54:59 rsp

如何重新使用已下載的瀏覽器的音頻，使其不會在使用相同音頻文件的其他頁面中再次下載它？

回答

相關問題