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

【问题标题】：SoundCloud API: Using oEmbed to specify start and stop time for playing a trackSoundCloud API：使用 oEmbed 指定播放曲目的开始和停止时间
【发布时间】：2016-01-27 17:25:10
【问题描述】：

我有一个与 SoundCloud API 集成的 Web 应用程序，用于搜索和播放曲目。我可以使用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 >

这是按预期工作的。我的问题是我想以这种方式流式传输曲目，但具有指定的开始和停止时间。我做了一些研究，发现了一个看似相关的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();
    });
};

但无济于事。 有没有办法在这种情况下指定开始时间？

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

【问题讨论】：

标签： javascript angularjs api soundcloud oembed

【解决方案1】：

想通了。 SoundCloud Widget API 救援！

要访问提供 SoundCloud Widget API 的 JavaScript 对象，请将 this script 添加到您的 html 页面。

此脚本将SC.Widget(/*iframeElement|iframeElementID*/) 函数公开给全局范围。它允许您从父页面（小部件插入的页面）控制小部件。 SC.Widget 接受对 iframe 元素或其 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 也很有用。因此，如果您希望在用户暂停、播放、完成、搜索等时发生某些事情，您可以挂钩这些事件。

【讨论】：