web-dev-qa-db-ja.com

HTML5オーディオ位置の設定

HTML5 Audio要素の特定の時間オフセットにジャンプする方法は？

彼らは、単純に currentTime property （emphasis mine）を設定できると言っています：

currentTime属性は、取得時に、現在の再生位置を秒単位で返す必要があります。 設定時、メディア要素に現在のメディアコントローラーがある場合、INVALID_STATE_ERR例外をスローする必要があります。そうでない場合、ユーザーエージェントは新しい値を探す必要があります（例外が発生する可能性があります）。

残念ながら、動作しないようです（Chromeで必要です）。

同様の質問がありますが、答えはありません。

javascriptgoogle-chromehtml5-audio
61
katspaugh

my chrome ...で動作します.

$('#audio').bind('canplay', function() {
  this.currentTime = 29; // jumps to 29th secs
});
51
marko

オーディオファイルをジャンプするには、サーバーを適切に構成する必要があります。

クライアントは バイト範囲要求 を送信して、ファイルの特定の領域を検索および再生するため、サーバーは適切に応答する必要があります。

まだダウンロードされていないメディアの領域のシークと再生をサポートするために、GeckoはHTTP 1.1バイト範囲リクエストを使用して、シークターゲット位置からメディアを取得します。さらに、X-Content-Durationヘッダーを提供しない場合、Geckoはバイト範囲要求を使用してメディアの終わりまでシークし（Content-Lengthヘッダーを提供すると仮定）、メディアの継続時間を決定します。

サーバーがバイト範囲要求に正しく応答する場合、currentTimeを介してオーディオの位置を設定できます。

audio.currentTime = 30;

MDNの Oggメディア用のサーバーの構成 を参照してください（実際には、他の形式にも同じことが当てはまります）。

また、 HTML5 Oggビデオおよびオーディオ用のWebサーバーの構成 を参照してください。

64
katspaugh

#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;
16
Roko C. Buljan

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;
9
Cedric Dahl

currentTimeプロパティを設定しようとしていることを確認してくださいafterオーディオ要素を再生する準備ができています。仕様で定義されているoncanplayイベント属性に関数をバインドできます。

失敗したコードのサンプルを投稿できますか？

8
dragon

Firefoxは、まだ読み込まれていないコンテンツを探すときにバイト範囲要求も行います。これは単なるchromeの問題ではありません。応答ヘッダー「Accept-Ranges：bytes」を設定し、206部分コンテンツを返します任意のクライアントがバイト範囲要求を行うことを許可するステータスコード。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly を参照してください

7
user3834658

オーディオのプログレスバーが機能していませんが、オーディオが正常に機能しているという問題に直面していました。このコードは私のために機能します。それがあなたにも役立つことを願っています。ここで、歌はオーディオコンポーネントのオブジェクトです。

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);
    });
5
Anuj Sharma

@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;
            };
        });

注意事項

  1. この回避策は、大きなファイルには適していません。
  2. CORSが適切に設定されていないと、クロスオリジンでは機能しません。
4
artur grzesiak

時間位置を5秒に設定します。

var vid = document.getElementById("myAudio");
vid.currentTime = 5;
2
Jijo Paulose