HTML5 Audio要素の特定の時間オフセットにジャンプする方法は?
彼らは、単純に currentTime
property (emphasis mine)を設定できると言っています:
currentTime
属性は、取得時に、現在の再生位置を秒単位で返す必要があります。 設定時、メディア要素に現在のメディアコントローラーがある場合、INVALID_STATE_ERR例外をスローする必要があります。そうでない場合、ユーザーエージェントは新しい値を探す必要があります(例外が発生する可能性があります)。
残念ながら、動作しないようです(Chromeで必要です)。
同様の質問がありますが、答えはありません。
my chrome ...で動作します.
$('#audio').bind('canplay', function() {
this.currentTime = 29; // jumps to 29th secs
});
オーディオファイルをジャンプするには、サーバーを適切に構成する必要があります。
クライアントは バイト範囲要求 を送信して、ファイルの特定の領域を検索および再生するため、サーバーは適切に応答する必要があります。
まだダウンロードされていないメディアの領域のシークと再生をサポートするために、GeckoはHTTP 1.1バイト範囲リクエストを使用して、シークターゲット位置からメディアを取得します。さらに、X-Content-Durationヘッダーを提供しない場合、Geckoはバイト範囲要求を使用してメディアの終わりまでシークし(Content-Lengthヘッダーを提供すると仮定)、メディアの継続時間を決定します。
サーバーがバイト範囲要求に正しく応答する場合、currentTime
を介してオーディオの位置を設定できます。
audio.currentTime = 30;
MDNの Oggメディア用のサーバーの構成 を参照してください(実際には、他の形式にも同じことが当てはまります)。
また、 HTML5 Oggビデオおよびオーディオ用のWebサーバーの構成 を参照してください。
#t
URIを使用できます 時間範囲プロパティ
それは、audioとvideoの両方に有効ですメディア。
stackoverflow.mp3#t=8.5 // Will start playing from the 8.5 sec.
var a = new Audio();
a.src= "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg#t=4.5";
a.play();
特定の範囲に動的にスキップしたい場合は、 HTMLMediaElement。currentTime :
audio.currentTime = 8.5;
muchより簡単な解決策は
var element = document.getElementById('audioPlayer');
//first make sure the audio player is playing
element.play();
//second seek to the specific time you're looking for
element.currentTime = 226;
currentTime
プロパティを設定しようとしていることを確認してくださいafterオーディオ要素を再生する準備ができています。仕様で定義されているoncanplay
イベント属性に関数をバインドできます。
失敗したコードのサンプルを投稿できますか?
Firefoxは、まだ読み込まれていないコンテンツを探すときにバイト範囲要求も行います。これは単なるchromeの問題ではありません。応答ヘッダー「Accept-Ranges:bytes」を設定し、206部分コンテンツを返します任意のクライアントがバイト範囲要求を行うことを許可するステータスコード。
オーディオのプログレスバーが機能していませんが、オーディオが正常に機能しているという問題に直面していました。このコードは私のために機能します。それがあなたにも役立つことを願っています。ここで、歌はオーディオコンポーネントのオブジェクトです。
HTMLパーツ
<input type="range" id="seek" value="0" max=""/>
JQueryパート
$("#seek").bind("change", function() {
song.currentTime = $(this).val();
});
song.addEventListener('timeupdate',function (){
$("#seek").attr("max", song.duration);
$('#seek').val(song.currentTime);
});
@katspaughの答えは正しいですが、追加のサーバー構成を必要としない回避策があります。アイデアは、オーディオファイルをblobとして取得し、dataURL
に変換し、src
要素のaudio
として使用することです。
angular $http
、しかし必要であれば、Vanilla JSバージョンも追加できます:
$http.get(audioFileURL,
{responseType:'blob'})
.success(function(data){
var fr = new FileReader;
fr.readAsDataURL(data);
fr.onloadend = function(){
domObjects.audio.src = fr.result;
};
});
時間位置を5秒に設定します。
var vid = document.getElementById("myAudio");
vid.currentTime = 5;