36

オーディオ ファイルを再生する単純な自動再生スニペットがありますが、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>

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

4

3 に答える 3

26

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

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

また、メソッドではなく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 : Firefox 以外のcurrentTimeブラウザでは不適切に実装されている可能性があります。この報告された W3C バグの解決によると、が設定されている場合は、 イベントとイベントが発生するはずです。これは、この例では、Firefox がオーディオ トラックの最初の 1 秒程度を無期限に再生し、再生を継続しないことを意味します。この簡単な回避策を思いついたので、変更しましょうcurrentTimecanplaycanplaythrough

this.currentTime = 12;

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

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

この仕様の解釈については現在も論争が続いていますが、現時点では、この実装は HTML5 オーディオをサポートする最新のブラウザーのほとんどで動作するはずです。

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

于 2012-08-19T22:19:13.163 に答える
-1

すべての人に役立つ簡単な答えがあります

1-クリックするとオーディオ/ビデオが再生されるボタンを作成します
2-ボタンをクリックするとオーディオが再生され、ボタンが非表示になるかどうかをテストし、
3-ページの読み込み時にボタンをクリックします

    window.onload =function(){
        document.getElementById("btn").click();
    }
于 2021-09-11T14:29:53.310 に答える