如何在请求播放嵌入的声音剪辑之前阻止将其下载到浏览器缓存？

Question

这几天我一直在为这个问题摸不着头脑，

我正在为一个与呼叫跟踪相关的客户构建一个网络应用程序。该系统的一方面是允许直接从消息详细信息旁边的“播放”按钮播放简短的录制语音邮件消息。

我正在访问声音文件；

$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\" />
        ";
}

声音剪辑存储在网络根目录之外的一个目录中，我被告知我们无法更改。由于无法在本地获取文件，我编写了一个小的 php 传递脚本，将文件传递回我的网页。

声音片段在播放之前使用一小段 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()。