最初は非表示の 1 つ以上のオーディオ要素をロードするページがあります。これは私が使用しているマークアップの例です:
<audio style="display:none;" data-id="<?=($file['id'])?>" class="digitalMessageAudio" id="primaryPlayer<?=($file['id'])?>" preload="auto" src="mp3.php?f=<?=($file['path'])?>" controls></audio>
そこsrcにあるプロパティは を参照してmp3.phpおり、単にネットワーク上の場所からメディア ファイルを読み取り、それを通過させます (これは機能し、必要です)。
loadロード時に、これらのオーディオ要素のメソッドを呼び出しています。できる限りラグを少なくして、すぐにプレイできるようにしてほしい:
$('.digitalMessageAudio').each(function (idx, ele) {
ele.load();
});
ユーザーが「再生」ボタン (buttonページ上にある別の場所にある要素) をクリックすると、オーディオ プレーヤーが表示され、再生が開始されます。
$(player).css('display', 'block');
setTimeout(function () {
player.play();
}, 500);
タイムアウトが必要です。これがないと、プレーヤーは再生を開始し、ユーザー エージェント (このアプリに固有の Firefox) は、display再生が完了するか一時停止するまで、スタイルへの変更を再描画しません。これは、プレーヤーがページにどのように表示されるかです。
ページの他の場所には、ユーザーが別のレコードをロードできるようにする select 要素があります。このレコードには、1 つ以上の関連付けられたデジタル ファイルが含まれる場合があります。新しいレコードは ajax を介してロードされ、前のレコードの HTML を置き換えます。
$.ajax({
'url':'announcement?type=psa&id='+message_id+'&render=1',
'success':function (response) {
$('.renderedMessage').html(response);
setTimeout(function () {
$('.digitalMessageAudio').each(function (idx, ele) {
ele.load();
});
}, 500);
}
});
これはすべて正しく機能します。問題は、今度はユーザーが関連する再生ボタンをクリックすると、プレーヤーが表示されて再生が開始されることです。ただし、プレイヤーが ajax 経由でページに追加された場合、プログレス バーは常に正しくありません。
トラックが再生されると、トラックの長さは刻々と増加しますが、進行状況バーは最後まで詰まったままです. オーディオの合計継続時間は単に表示されません。トラックを再生すると、既に再生されたオーディオの部分をシークできますが、順方向にはシークできません。
Firebug の Net パネルで見ると、オーディオ ファイルがロードされているのがわかります (再生をクリックする前に)。これらの読み込みが完了するまで待っても、問題には影響しません。
問題の概要: (AJAX を介して)動的に追加されたaudio要素は、オーディオの長さを表示せず、プログレス/シーク バーが正しくありません。
EDIT私の問題は、phpからファイルを提供する方法に固有のものであったため、phpタグを追加しました