如何在請求播放嵌入式聲音剪輯之前阻止它們被下載到瀏覽器緩存？

Question

這幾天我一直在撓頭，

我正在為與呼叫跟蹤相關的客戶端構建 web 應用程序。 該系統的一個方面是允許從消息詳細信息旁邊的“播放”按鈕直接播放簡短的錄制語音郵件消息。

我正在訪問這樣的聲音文件；

$wavefile=$calls_row['recording'];
if (file_exists("/var/spool/asterisk/monitor/".$calls_row['recording'].".wav")){
    $wavefile="
          <form>
              <input type=\"button\" value=\"Play\" onClick=\"PlaySound('clip-".$stat_id."')\" />
          </form>
          <embed src=\"pass-thru.php?f=".$calls_row['recording'].".wav\" autostart=\"false\" width=\"0\" height=\"0\" id=\"clip-".$stat_id."\" enablejavascript=\"true\" />
        ";
}

聲音片段存儲在 web 根目錄之外的一個目錄中，我被告知我們不能更改。 由於無法在本地獲取文件，我整理了一個小的 php 傳遞腳本，將文件傳回我的 web 頁面。

聲音片段在播放前使用一小塊javascript獲取指定文件的鏈接ID；

function PlaySound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
}

這些文件在 webroot 之外訪問，並通過以下 php 代碼傳遞給 html；

$basedir = '/var/spool/asterisk/monitor';
$clip = $_GET['f'];
$file = $basedir.'/'.$clip;
$ext = array_pop(explode ('.', $file));
if(file_exists($file) && $ext != '' && isset($allowed[strToLower($ext)])) {
    $type = $allowed[strToLower($ext)];
}
header("Content-type: audio/x-wav");
header("Content-Disposition: filename='{$file}'");
header("Content-Transfer-Encoding: binary");
header('Content-Length: ' . filesize($file));
readfile($file);
exit();

一切正常，剪輯通過並且聲音剪輯在瀏覽器中播放。

問題是當頁面加載時所有的聲音剪輯都被加載到緩存中，這顯然會減慢速度。 我對結果進行了分頁，因此一次只能下載 25 個，但我真的很想擁有指向可用聲音剪輯的鏈接，並且只有在選擇播放時才會下載它們。

任何想法，將不勝感激。

Answer 1

我能想到的最簡單的選擇是不在 HTML 中嵌入聲音文件。 據我所知，老式的embed元素沒有關閉聲音文件預加載的選項，對於此功能，您應該查看 HTML5 的audio （當然，這在舊 IE 中不起作用）。

所以基本上，你只是不把embed元素放入你的 HTML 代碼中，當點擊播放按鈕時，你從 Javascript 插入embed元素。 創建embed元素所需的數據（例如 URL）可以存儲在data-屬性中，或者在您的情況下，只需寫入內聯事件處理程序的參數列表。

如果您需要關心關閉 Javascript 的用戶，您仍然可以在noscript標簽中包含embed元素（希望它不會開始預加載）。

對於這種方法，您只需要一些基本函數，如document.createElement()和insertBefore() 。