SoundCloud API：使用 oEmbed 指定播放曲目的开始和停止时间

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

将小部件绑定到视图：

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

这按预期工作。我的问题是我想以这种方式流式传输曲目，但具有 指定的开始和停止时间 。我做了一些研究，发现一个看似相关的 Whosebug 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', ....) 可用于绑定到 Widget API 的多个 Event types 也很有用。因此，如果您希望在用户暂停、播放、完成、搜索等时发生某些事情，您可以挂接到这些事件中。

SoundCloud API：使用 oEmbed 指定播放曲目的开始和停止时间

SoundCloud API: Using oEmbed to specify start and stop time for playing a track

javascript

api

oembed

soundcloud

angularjs