如何使用SoundCloud API添加Previous和Next按鈕

Question

我想在SoundCloud自定義播放器中添加上一個和下一個按鈕，可在此處找到。

如果您查看SoundCloud Widget方法，您可以看到它具有：

prev();
next();

更具體地說，我正在使用播放列表，我不知道如何將其合並到javascript文件中，以便它與播放器掛鈎？

Answer 1

嗯，它正好在你鏈接到的頁面頂部：

此腳本將SC.Widget（/ iframeElement | iframeElementID /）函數公開給全局范圍。 它允許您從父頁面（窗口小部件插入的頁面）控制窗口小部件。 SC.Widget接受對iframe元素或其id的引用。

這意味着（同樣引用文檔）：

var iframeElement   = document.querySelector('iframe');
var iframeElementID = iframeElement.id;
var widget1         = SC.Widget(iframeElement);
var widget2         = SC.Widget(iframeElementID); //both widgets seem to be the same it's just two ways of accessing them

然后你可能只需要這樣做：

widget1.prev();

編輯 ：

由於您使用的是自定義播放器（沒有文檔化的界面 ）而不是HTML5小部件，您可以使用我從這里無恥地復制的方法： https ： //gist.github.com/1509934

使用這樣的函數：

function getNextTrack(node) {
  var $player = $(node).closest('.sc-player'),
      $nextItem = $('.sc-trackslist li.active', $player).next('li');
  // try to find the next track in other player
  if(!$nextItem.length){
    $nextItem = $player.nextAll('div.sc-player:first').find('.sc-trackslist li:first');
  }
  return $nextItem;
};

要獲取當前“nextTrack”的項目，然后使用jQuery或其他東西觸發該鏈接上的單擊：

var currentNext = getNextTrack($('.sc-player').first()[0]);
$(currentNext).trigger('click');

在我的控制台工作得很好....

編輯2

只是為了澄清，這很有效！ 我所做的就是添加一個類'sc-next'的鏈接並寫下：

$('.sc-next').live('click', function(event) {
    var currentNext = getNextTrack($('.sc-player').first()[0]);
    $(currentNext).trigger('click');
});

Answer 2

謝謝你們！ 我最終做的是：

$('a.sc-next').live('click', function(event) {
  var $player = $(this).closest('.sc-player'),
  $nextItem = $('.sc-trackslist li.active', $player).next('li');
  $nextItem.click();
  return false;
});

$('a.sc-prev').live('click', function(event) {
  var $player = $(this).closest('.sc-player'),
  $nextItem = $('.sc-trackslist li.active', $player).prev('li');
  $nextItem.click();
  return false;
});