API SoundCloud: использование oEmbed для указания времени начала и окончания воспроизведения трека

У меня есть веб-приложение, интегрирующееся с SoundCloud API для поиска и воспроизведения треков. Я могу успешно транслировать треки через API с помощью SoundCloud oEmbed следующим образом:

scope.playTrack = function(track) {
  SC.oEmbed(track.permalink_url, { auto_play: true })
    .then(function(oEmbed) {
      scope.soundCloudWidget = $sce.trustAsHtml(oEmbed.html);
      scope.$apply();
    });
};

С виджетом, привязанным к представлению:

<div ng-bind-html="soundCloudWidget"></div >

Это работает, как и ожидалось. Моя проблема в том, что я хотел бы транслировать трек таким образом, но с указанным временем начала и окончания. Я провел небольшое исследование и нашел похожий вопрос/ответ StackOverflow в котором упоминается, что можно:

добавьте #t=12s к URL-адресу звука, чтобы он начинался с 12-й секунды

Это работает при создании URL-адреса, например:

https://soundcloud.com/griz/summer-97-ft-muzzy-bearr#t=54s

Однако для start = '54s' я хотел бы сделать что-то вроде этого

scope.playTrackSection = function(track, start) {
  SC.oEmbed(track.permalink_url, { auto_play: true, t: start })
    .then(function(oEmbed) {
      scope.soundCloudWidget = $sce.trustAsHtml(oEmbed.html);
      scope.$apply();
    });
};

or

scope.playTrackSection = function(track, start) {
  var url = track.permalink_url + "#t=" + start;
  SC.oEmbed(track.permalink_url, { auto_play: true })
    .then(function(oEmbed) {
      scope.soundCloudWidget = $sce.trustAsHtml(oEmbed.html);
      scope.$apply();
    });
};

Но безрезультатно. Есть ли какой-либо способ указать время начала в таком контексте?

Бонусные баллы: Кроме того, есть ли какой-либо возможный способ указать продолжительность или время, когда потоковая песня должна перестать воспроизводиться?


javascript api angularjs soundcloud oembed
person Cumulo Nimbus    schedule 27.01.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Догадаться. API виджета SoundCloud спешит на помощь!

Чтобы получить доступ к объекту JavaScript, который предоставляет SoundCloud Widget API, добавьте этот скрипт в ваша html-страница.

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

Итак, после добавления этого скрипта я смог сделать что-то вроде этого:

scope.playTrackSection = function(track, startTime, endTime) {
  SC.oEmbed(track.permalink_url, { auto_play: true })
    .then(function(oEmbed) {
      scope.soundCloudWidget = $sce.trustAsHtml(oEmbed.html);
      scope.$apply();

      scope.iframe = document.getElementById('soundcloud_widget').querySelector('iframe');
      scope.widget = SC.Widget(scope.iframe);

      scope.widget.seekTo(startTime);
      scope.widget.bind('playProgress', function(needle) {
        if (needle.currentPosition >= endTime) {
          scope.widget.pause();
        }
      });
    });
};

С HTML:

<div id="soundcloud_widget" ng-bind-html="soundCloudWidget"></div>

Также полезно знать, что scope.widget.bind('xxxx', ....) можно использовать для привязки к нескольким типам событий API виджетов. Итак, если вы хотите, чтобы определенные вещи происходили, когда пользователь приостанавливает, воспроизводит, заканчивает, ищет и т. д., вы можете подключиться к этим событиям.

person Cumulo Nimbus    schedule 27.01.2016