javascript - Onended 切换到下一曲目

Question

我正在尝试构建一个 MP3 播放器。在这里，我想在当前大头钉结束后切换到下一首歌曲。

这是我的代码的一部分：

function clicki(ID, norrnd) {

  if (norrnd == 'nor') {
    $('.liActive').removeClass('liActive');
    $('#' + ID).next().addClass('liActive');

    // Set track Data
    $('audio').attr('id', 'audioNor');
    $('audio').attr('src', $('.liActive').attr('rel'));

    // Play
    var player = $('.tbd').get(0);
    player.play();
    $('#pause').removeClass('hi');

    $(player).bind('ended', clicki(ID++, 'nor')); //as well as .onfinish result in TOO MUCH RECURSION error.
  }
}

<audio controls id="" class="tbd" type="audio/mpeg" src="Ella Fitzgerald - It Don't Mean a Thing.mp3"></audio>

因此，当我clicki()第一次启动页面时，页面会立即冻结：

太多的递归。

如何在没有递归泛洪的情况下自动切换曲目？

Answer 1

您正在立即调用该函数——您需要围绕它创建一个函数：

function clicki(ID, norrnd) {
  if (norrnd === 'nor') {
    $('.liActive').removeClass('liActive');
    $('#' + ID).next().addClass('liActive');

    // Set track Data
    $('audio').attr('id', 'audioNor');
    $('audio').attr('src', $('.liActive').attr('rel'));

    // Play
    var $player = $('.tbd');;
    $player.get(0).play();
    $('#pause').removeClass('hi');

    // if you call it now, it's going to keep calling itself
    $player.bind('ended', function () {
      clicki(ID++, 'nor');
    });
  }
}