javascript - SoundCloud API:使用oEmbed指定播放轨道的开始和停止时间

我有一个与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();
    });
};

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

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

这正在按预期方式工作。我的问题是我想以这种方式流式传输曲目，但指定了的开始和结束时间。我进行了一些研究，发现一个看似相关的StackOverflow question/answer提到了一个可以:

将#t=12s附加到声音的URL，以在第12秒开始

这在构造如下网址时有效:

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

但无济于事。 是否可以在这种类型的上下文中指定开始时间？

优点:另外，有什么方法可以指定流歌曲停止播放的持续时间或时间？

最佳答案

弄清楚了。 SoundCloud Widget API来营救!

因此，添加此脚本后，我可以执行以下操作:

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)到Widget API的几个Event types中也是很有用的。因此，如果您希望某些事情在用户暂停，播放，完成，搜索等操作时发生，那么您可以参与这些事件。