2

プレイリストを繰り返し処理しようとしていますが、現在の曲の再生が完了するまで、またはプレイリスト内の新しい曲が選択されるまで、次の項目にスキップしません。現在、私の配列は繰り返されていますが、現在の曲の再生が終了するのを待ちません。

HTML：

<li mp3="song1.mp3"></li>
<li mp3="song2.mp3"></li>
<li mp3="song3.mp3"></li>
<li mp3="song4.mp3"></li>

JavaScript：

var player = new MediaElementPlayer('audio');

playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3', 'song4.mp3'];

$('li').click(function() {
  for (var i = playlist.indexOf($(this).attr('mp3')); i < playlist.length; i++) {
    player.setSrc(playlist[i]);
    player.play();
    player.addEventListener('ended', function(e) {
      player.setSrc(playlist[i]);
      player.play();
    }, false);
  }
});
4

1 に答える 1

3

プレーンループを実行しているので、一連の.play()呼び出しが次々に実行されます。代わりに、1つだけ実行.play()し、曲が終了したら次のを呼び出します。これは、再帰的に呼び出すことで実行できます。また、data-mp3属性とを使用.data("mp3")します。これがカスタム属性を定義する唯一の有効な方法だからです。

$("#playlist li").click(function() {
  var start = playlist.indexOf($(this).data("mp3"));

  (function play(i) {
    if(i < playlist.length) {  // if we're not at the end of the playlist yet
      player.setSrc(playlist[i]);
      player.play();
      player.addEventListener("ended", function(e) {
        play(i + 1);  // done, so call with next index
      }, false);
    }
  })(start);  // call it with first index now
});
于 2012-12-12T17:43:23.523 に答える