1

私はこれで数日間頭を悩ませてきましたが、

コール トラッキングに関連するクライアント用の Web アプリを構築しています。システムの 1 つの側面は、メッセージの詳細の横にある「再生」ボタンから直接、録音された短いボイスメール メッセージを再生できるようにすることです。

サウンドファイルにそのままアクセスしています。

$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 個しかダウンロードできませんが、サウンドクリップへのリンクを利用できるようにして、再生するように選択した場合にのみダウンロードされるようにしたいです。

どんなアイデアでも大歓迎です。

4

1 に答える 1

0

私が考える最も簡単なオプションは、サウンド ファイルを HTML に埋め込まないことです。私の知る限り、昔ながらのembed要素にはサウンド ファイルのプリロードをオフにするオプションがありません。この機能については、HTML5 を調べる必要がありますaudio(もちろん、古い IE では機能しません)。

したがって、基本的には、embed要素を HTML コードに挿入するのではなく、[再生] ボタンがクリックされたときに、embedJavaScript から要素を挿入します。要素を作成するために必要なデータembed(URL など) は、属性に格納するdata-か、インライン イベント ハンドラーのパラメーター リストに単に書き込むことができます。

Javascript がオフになっているユーザーに配慮する必要がある場合でも、embed要素をnoscriptタグに含めることができます (プリロードが開始されないことを願っています)。

このメソッドではdocument.createElement()、 や などのいくつかの基本的な関数のみが必要insertBefore()です。

于 2011-06-29T15:22:02.027 に答える