web-dev-qa-db-ja.com

HTML 5 <audio>-特定の時点でファイルを再生します

私はオーディオファイルを再生する簡単な自動再生スニペットを持っていますが、JavaScriptまたは属性として特定の時間にそのファイルを再生することを考えていました（例3:26）。

<script type="text/javascript">
    var myAudio=document.getElementById('audio2')
    myAudio.oncanplaythrough=function(){this.play();}
</script>

<audio id="audio2" 
       preload="auto" 
       src="file.mp3" 
       oncanplaythrough="this.play();">
</audio>

どんな助けでも素晴らしいでしょう。前もって感謝します ：）

javascriptjqueryhtmlaudio
25
Stephen Cioffi

いくつかのこと...あなたのスクリプトは最初にオーディオタグの後にする必要があります。

また、JavaScriptを使用してこれを処理しているため、audioタグのoncanplaythough属性は必要ありません。

さらに、oncanplaythroughはイベントであり、メソッドではありません。代わりにcanplaythoughを使用するリスナーを追加しましょう。これを見てください：

<audio id="audio2" 
   preload="auto" 
   src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" >

   <p>Your browser does not support the audio element</p>
</audio>

<script>
  myAudio=document.getElementById('audio2');
  myAudio.addEventListener('canplaythrough', function() {
    this.currentTime = 12;
    this.play();
  });
</script>

そして最後に、特定のポイントで曲を開始するには、実際にファイルを再生する前にcurrentTimeを設定するだけです。ここでは12秒に設定しているため、この例では聞こえます。3：26の場合は206（秒）を使用します。

ライブデモをご覧ください： http://jsfiddle.net/mNPCP/4/

[〜＃〜] edit [〜＃〜]：currentTimeがブラウザーに不適切に実装されている可能性がありますFirefox以外。この解決 提出されたW3Cバグ によると、currentTimeが設定されている場合、canplayおよびcanplaythroughイベントが発生するはずです。つまり、この例では、Firefoxはオーディオトラックの最初の1秒程度を無期限に再生し、再生を継続することはありません。私はこの簡単な回避策を思い付きました、変更しましょう

this.currentTime = 12;

すでに設定されているかどうかをテストし、canplaythroughが繰り返し呼び出されないようにします。

if(this.currentTime < 12){this.currentTime = 12;}

この仕様の解釈は現在も係争中ですが、現時点では、この実装はHTML5オーディオをサポートするほとんどの最新のブラウザーで機能するはずです。

更新されたjsFiddle： http://jsfiddle.net/mNPCP/5/

20
MusikAnimal

これを行う最良の方法は、メディアフラグメントURI仕様を使用することです。あなたの例を使用して、3：26で始まるオーディオをロードするとします。

<audio id="audio2" 
       preload="auto" 
       src="file.mp3#t=00:03:26" 
       oncanplaythrough="this.play();">
</audio>

あるいは、file.mp3#t=206のように、秒数を使用することもできます。

開始時刻と終了時刻をコンマで区切って、終了時刻を設定することもできます。 file.mp3#t=206,300.5

特定のタイムスタンプからのみロードすることをブラウザに示唆しているため、このメソッドはJavaScriptメソッドよりも優れています。ファイル形式と範囲付きリクエストに対するサーバーのサポートによっては、ブラウザが再生に必要なデータのみをダウンロードすることが可能です。

以下も参照してください。

3
Brad