自定义 Soundcloud 小部件 (api) 播放器

Question

我正在尝试为一些 Soundcloud 曲目创建自定义播放器。这个想法是隐藏 iframe 并创建一些播放器来播放不同的曲目。加载和播放一切正常，但我有两个挑战。

1. 如何创建进度条 (SC.Widget.Events.PLAY_PROGRESS)
2. 如何创建下载链接？

从我编码的方式来看一个 sn-p：

    (function(){
    var widgetIframe = document.getElementById('sc-widget'),
        widget       = SC.Widget(widgetIframe);

    widget.bind(SC.Widget.Events.READY, function() {

    $('#play').click(function(){
        widget.play();
    });
});  }());

糟糕的是，OPEN API 已关闭..

Answer 1

如果您尝试使用自定义播放器流式传输曲目，我建议您根本不要使用该小部件。而是使用streaming SDK directly。 There are methods 那里可以完成加载、播放、暂停、搜索、获取歌曲的当前时间等所需的一切操作。

要初始化流播放器，您可以执行以下操作：

SC.initialize({
  client_id: "<client id>"
});

SC.stream("/tracks/" + song_id).then(function (player) {
  player.play();
}

要构建实际的进度条，您可以在流函数中执行如下操作（此示例使用 JQuery，但您不需要）：

player.on("time", function () {
    var current_time = player.currentTime();
    var current_duration = player.options.duration;
    $(".scrubber .scrubber_fill").css("width", ((current_time / current_duration) * 100) + "%");
});