はじめに
今回はプリザンターの添付ファイルに貼り付けられた音楽ファイルをブラウザ画面上でシームレスに再生するためにオーディオプレーヤーを埋め込む方法を紹介します。
何を使うか？
HTMLの <audio>タグを使うのが鉄板なので、今回はそれを使用します。Howler.jsを使うという方法もあるのですが、今回はそれは使わずにシンプルにいきます。
実装してみた
サーバスクリプトで実装します。条件は行表示の前です。
const attachments = JSON.parse(model.AttachmentsA);
attachments.forEach(function(attachment){
columns.AttachmentsA.RawText += `<audio controls preload="none"><source src="/binaries/${attachment.Guid}/download" type="audio/wav"></audio>`;
});
modelに格納されている添付ファイル項目のJSONをオブジェクトにパースして、それをforeachで回してcolumnsのRawTextに格納しています。
添付ファイルにはオーディオファイルしか格納されていない前提なので、例外処理を加えていませんが気になる方はattachment.Nameに格納されている添付ファイル名の拡張子をみて判断してください。
実行してみると添付ファイル項目はこのように表示されます。サーバ→クライエントの通信量を極力減らしたいためプリソードをさせていないためトータル時間などは表示されていませんが、このあたりは <audio>タグのオプションでコントロール可能なので、いろいろとカスタマイズしてみてください。
まとめ
今回は、添付ファイル項目の音声ファイルをシームレスに再生するためにプレーヤーを埋め込む方法を紹介しました。プリザンターをCRMとして使用する際などIP-PBXの録音データetc.を一括管理する時などに便利な方法なので、是非試してみてください。