0

このイベントをキャッチするのに問題があります。もつ：

<div id="click_me"></div>    
<audio class="fo_audio">
       <source src="track1.mp3" type="audio/mpeg; codecs='mp3'">
    </audio>
    <audio class="fo_audio">
       <source src="track2.mp3" type="audio/mpeg; codecs='mp3'">
    </audio>
    <audio class="fo_audio">
       <source src="track3t.mp3" type="audio/mpeg; codecs='mp3'">
    </audio>

そしてsmthをしようとします：

song_number = 0;
$("#click_me").click(function(){
$("audio").get(song_number).play()
    });     
$("audio").get(song_number).ended(function(){
    song_number++;
    $("audio").get(song_number).play();
    });

それをどのように機能させるのですか？

4

4 に答える 4

2

コードはended()、最初のオーディオクリップにハンドラーを割り当てるだけです。これを試して：

var count = $("audio").size();
$("audio").each(function (song_number) {
  if (song_number < count-1) {
    this.ended(function () {
      $("audio")[song_number+1].play();
    });
  }
});

これはテストされていません。ended()各オーディオクリップをループし、次のクリップの再生を開始するイベントを添付します。最後のクリップはイベントハンドラーを取得しません。

于 2012-10-29T21:09:36.930 に答える
0

少し遊んだ後、私はこれで終わりました：

HTML：

<audio class="fo_audio" controls="controls">
   <source src="http://cache.gizmodo.com/assets/resources/mp3/Woman64.mp3" type="audio/mpeg" />
   <source src="http://cache.gizmodo.com/assets/resources/mp3/WomanWAV.wav" type="audio/wav" />
</audio>
<audio class="fo_audio" controls="controls">
   <source src="http://cache.gizmodo.com/assets/resources/mp3/FeelGood64.mp3" type="audio/mpeg" />
   <source src="http://cache.gizmodo.com/assets/resources/mp3/FeelGoodWAV.wav" type="audio/wav" />
</audio>
<audio class="fo_audio" controls="controls">
   <source src="http://cache.gizmodo.com/assets/resources/mp3/Carmen64.mp3" type="audio/mpeg" />
   <source src="http://cache.gizmodo.com/assets/resources/mp3/CarmenWAV.wav" type="audio/wav" />
</audio>
<div>
<button class="play" data-which="0">Play 0</button>
<button class="play" data-which="1">Play 1</button>
<button class="play" data-which="2">Play 2</button>
<button class="play" data-which="all">Play all</button>
</div>

Javascript：

var playing = false;
function playCascade(e) {
    if(playing) { return; }
    var song_number = e.song_number || 0;
    var $a = $("audio").eq(song_number);
    if($a.length) {
        $a.get(0).play();
        $a.off('ended').on('ended', function(){
            playing = false;
            if(e.continu) {
                playCascade($.extend(e, {
                    'song_number': song_number + 1
                }));
            }
        });
        playing = true;
    }
    else {
        playing = false;
    }
}
$(".play").on('click', function(e) {
    var which = $(this).data('which');
    playCascade($.extend(e, {
        'song_number': Number($(this).data('which')) || 0,
        'continu': which == 'all'
    }));
});

デモ

ノート：

  • 再生シーケンスは再帰で実現されます。
  • イベントオブジェクトeは、カスタムデータを渡すように拡張されています。
  • 新しい「終了」ハンドラーは、再生ごとにオーディオオブジェクトにアタッチされます。
  • 'continue'はjavascriptの予約語であるため、避けるのが最善です。したがって、「継続」。
  • デモには、各クリップの最後の5秒間だけが再生される追加の行があります。
  • オーディオ要素を非表示にするにcontrols="controls"は、<audio>タグから削除します。
  • Opera12.02でテスト済み。

そして、ここにコードの変形があります：http: //jsfiddle.net/bbPCk/3/

于 2012-10-29T23:47:19.057 に答える
0

答えは：

var count = $("audio").length;
$("audio").each(function (song_number) {
  if (song_number < count-1) {
    this.addEventListener("ended", function () {
      $("audio")[song_number+1].play();
    });
  }
});
于 2012-11-01T07:52:26.867 に答える
0

私はまた、イベントが「終了」したことはうまくいかなかったと信じていました。これは、removeEventListenerを使用しないことの（私のコンテキストを考慮した）エッジ効果でした。したがって、注意してください。AudioElementを削除する場合は、関連するインストール済みのイベントハンドラーも削除することを忘れないでください。

于 2017-05-23T17:46:04.307 に答える