如何通过SoundCloud API创建加载栏

Question

我正在通过SoundCloud API制作自定义播放器。我做了一个栏，显示正在播放的歌曲的一部分。但我希望有另一个栏显示歌曲的流媒体/加载部分。因此，流式栏总是比当前正在播放的栏更远。

这是我的代码，显示了搜索栏：

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

DEMO

知道怎么做吗？

Answer 1

假设你想要一个加载和播放栏，首先要在你想要显示栏的位置上放置2个100％宽的div。

然后使用＆＃34; whileloading＆＃34;和＃34;同时播放＆＃34;函数来自soundmanager api以百分比更新这些条的宽度。像这样：

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

并且显然与游戏栏完全相同。

如果您不想要一个游戏栏但只想要一个点，只需计算一下距离加载栏左侧的百分比。

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

你显然需要一些css样式，以及关于绝对，相对和固定定位的一些知识，但是如果你不知道那么你就不应该这样做......（对吗？）