Question

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

如果您查看 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();

修改：

由于您使用的是自定义播放器（没有 documented interface ）而不是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;
});

如何添加Previous＆amp;使用SoundCloud API的下一个按钮

2 个答案: