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

问题描述：

我正在寻找向SoundCloud自定义播放器添加上一个和下一个按钮，可以找到它here。如何使用SoundCloud API添加上一个和下一个按钮

如果检查出SoundCloud Widget Methods你可以看到它具有：

prev(); 
next();

只是为了更具体，我与播放列表的工作，我不知道如何纳入JavaScript本文件，以便它与播放器挂钩？

答

嗯，这是正确的，你链接到页面顶部：

这个脚本公开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

然后你propably只需要做：

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

虽然我没有使用html5小部件，但我正在使用自定义播放器。我只引用了小部件API，因为我注意到它有next（）和prev（），不确定它是否有用。看看我发布的第一个链接的来源。 – ndimatteo 2012-03-25 15:21:44

@NickD好吧，我很困惑，因为你的第二个链接指向HTML小部件文档...文档没有声明任何东西，但我想你总是可以做这样的事情：https：//gist.github.com/1509934并触发点击下一个链接。 – m90 2012-03-25 15:35:11

@NickD查看我的编辑 – m90 2012-03-25 15:41:26

答

感谢这个家伙！我最终做的是：

$('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; 
});

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

相关推荐