如何阻止嵌入式声音片段在被请求播放之前下载到浏览器缓存中？

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传递脚本放在一起，将文件传回我的网页。

声音剪辑正在使用一小段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关闭的用户，仍然可以将embed元素包含在noscript标记中（希望它不会开始预加载）。

对于此方法，您只需要一些基本功能，如document.createElement()和insertBefore()。