javascript - 声云 API : Using oEmbed to specify start and stop time for playing a track

Question

我有一个与 SoundCloud API 集成的网络应用程序，用于搜索和播放轨道。我可以使用 SoundCloud oEmbed 通过 API 成功流式传输轨道像这样:

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

将小部件绑定(bind)到 View :

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

这按预期工作。我的问题是我想以这种方式流式传输轨道，但具有指定的开始和停止时间。我做了一些研究，发现了一个看似相关的 StackOverflow question/answer提到一个可以:

将 #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();
    });
};

或

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

但是没有用。 在这种情况下是否有任何可能的方法来指定开始时间？

奖励点:此外，是否有任何可能的方法来指定流媒体歌曲应该停止播放的持续时间或时间？

Answer 1

想通了。 SoundCloud Widget API来救援!

In order to access the JavaScript object which provides the SoundCloud Widget API, add this script to your html page.

This script exposes the SC.Widget(/*iframeElement|iframeElementID*/) function to the global scope. It allows you to control the widget from the parent page (the page the widget is inserted into). SC.Widget accepts the reference to the iframe element or its id.

所以在添加这个脚本之后我可以做这样的事情:

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', ....) 可用于绑定(bind)多个 Event types 也很有用。小部件API。因此，如果您希望在用户暂停、播放、完成、搜索等时发生某些事情，您可以 Hook 这些事件。