Question

我有一个与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附加到声音的网址，以便在第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

想出来。 this救援！

要访问提供SoundCloud Widget API的JavaScript对象，请将SoundCloud Widget API添加到您的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的几个this script中也很有用。因此，如果您希望在用户暂停，播放，结束，搜索等情况下发生某些事情，您可以加入这些事件。

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

1 个答案: