如何通过 SoundCloud API 制作加载条

【问题标题】：How to make a loaded bar by SoundCloud API如何通过 SoundCloud API 制作加载条
【发布时间】：2014-08-28 19:50:11
【问题描述】：

我正在通过 SoundCloud API 制作自定义播放器。我做了一个酒吧，显示正在播放的歌曲的部分。但我想要另一个栏显示歌曲的流式传输/加载部分。因此，流式传输的条总是比当前正在播放的条更远。

这是显示搜索栏的代码：

function playIt() {
    SC.stream("/tracks/147310720", function (sound) {
        sound.play({
            whileplaying: function () {
                $(".seekLoad").css('width', ((sound.position / sound.duration) * 100) + '%');
            },
        });
});

DEMO

知道怎么做吗？

【问题讨论】：

标签： css api audio soundcloud soundmanager2

【解决方案1】：

假设您想要一个加载栏和播放栏，首先将 2 个 100% 宽的 div 放置在您希望显示栏的位置之上。

然后使用 soundmanager api 中的“whileloading”和“whileplaying”函数以百分比更新这些条的宽度。像这样：

whileloading: function() {
    $(".loadBar").css('width', ((this.bytesLoaded/this.bytesTotal) * 100) + '%');
},

显然播放栏完全一样。

如果您不想要播放栏而只想要一个点，只需计算距离加载栏左侧的百分比即可。

whileplaying: function() {
    $(".dot").css('left', ((this.bytesLoaded/this.bytesTotal) * 100) + '%');
},

您显然需要一些 css 样式，以及一些关于绝对、相对和固定定位的知识，但如果您不知道的话，您就不应该从事这方面的工作......（对吗？）

【讨论】：