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中不起作用））。

基本上，您只是不在您的HTML代码中添加embed元素，单击“播放”按钮时，您将从Javascript插入embed元素。您要创建的embed元素所需的数据（例如URL）可以存储在data-属性中，或者在您的情况下，只需写入内联事件处理程序的参数列表。

如果您需要关注关闭Javascript的用户，您仍然可以在embed标记中加入noscript元素（希望它不会开始预加载）。

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

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

1 个答案: