javascript - 如何使用 SoundCloud API 添加上一个和下一个按钮

Question

我希望将上一个和下一个按钮添加到 SoundCloud 自定义播放器，可以在此处找到。

如果您查看SoundCloud Widget Methods，您会发现它具有：

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;
});