Как добавить кнопки «Предыдущая» и «Следующая» с помощью SoundCloud API - PullRequest
Новая
       14

Как добавить кнопки «Предыдущая» и «Следующая» с помощью SoundCloud API

1 голос
/ 25 марта 2012

Я хочу добавить предыдущую и следующую кнопки в пользовательский проигрыватель SoundCloud, который можно найти здесь .

Если вы посмотрите Методы SoundCloud Widget вы можете видеть, что он имеет: 

prev();
next();

Если говорить более конкретно, я работаю со списками воспроизведения и не уверен, как это включитьв файл javascript, чтобы он подключался к проигрывателю?

Ответы [ 2 ]

3 голосов
/ 25 марта 2012

Хм, это прямо вверху страницы, на которую вы ссылаетесь:

Этот скрипт предоставляет SC.Widget (/ iframeElement | iframeElementID /) функция в глобальном масштабе. Это позволяет вам контролировать виджет из родительская страница (страница, в которую вставлен виджет). SC.Widget принимает ссылку на элемент iframe или его идентификатор.

Это означает (как указано в документации): 

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

EDIT

Поскольку вы используете Custom Player (у которого нет документированного интерфейса ), а не виджет 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');
});
1 голос
/ 14 августа 2012

Спасибо за это, ребята!Что я в итоге сделал: 

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