Javascript Soundcloud自定义播放器，具有Waveform.js和scriber功能

我正在为我的网站开发一个定制的Soundcloud播放器，使用

waveform.js

生成波形。它工作得很好，但缺少洗涤器功能。我怎样才能补充呢

我不是一个JS向导，仍然在学习我的方法，所以我非常感谢任何帮助或建议

更新IV:我发现了一种新方法，可以将画布生成的波形包含到原始SoundCloud自定义播放器

sc Player.js

中

首先，我找到了一行负责播放器HTML结构的代码，并将

id=“波形”

添加到第529行的

sc波形容器中：

.append('<div class="sc-time-span"><div class="sc-waveform-container" id="waveform">
       </div><div class="sc-buffer"></div><div class="sc-played"></div></div>')

接下来，我找到了一段代码，负责在第340行嵌入波形的原始图像，并将其注释掉：

 // $('.sc-waveform-container', $player).html('<img src="' + track.waveform_url +'" />');

/$（'.sc波形容器'，$player）.html（''）；

然后我在我的页面底部发布了下面的代码：

<script>
    SC.get("/tracks/80348246", function(track){
        var waveform = new Waveform({
            container: document.getElementById("waveform"),
            height: 40,
            innerColor: '#ffffff'   
        });
        waveform.dataFromSoundCloudTrack(track); 
    });
    //----------- end of insterted waveform.js code ----------------------
</script>


SC.get（“/tracks/80348246”，函数（track）{
var波形=新波形({
容器：document.getElementById（“波形”），
身高：40，
内部颜色：'#ffffff'
});
波形。来自SoundCloudTrack（track）的数据；
});
//-----------inserted waveform.js代码结束----------------------

结果是非常有希望的，现在我有完全可定制的波形和洗涤器的工作以及。然而，仍然有一些事情我想解决

在Chrome中，当我按play和pause，然后单击波形时，曲目开始播放，但播放按钮不会改变其状态。然后需要双击它以停止轨迹

缓冲区和进度条仍然只是背景中的
sc播放器
div。如何将
sc player.js
和
waveform.js
链接在一起，以便在波形画布上生成进度（如上的示例所示）

有没有办法解决这些问题

以下是直播网站上的玩家：
随叫随到

myVar=setInterval(Timed,100);

function Timed() {
    total_duration = duration of the track playing;
    current_duration = the current position of the track. 
    width = canvas width;
    pointer = the id of the pointer being used to show the progress.

    position = (canvas_width / total_duration) * current_duration;

    pointer.style.left = position;
}

您必须在中设置信息，但这样做可以
请显示您已经尝试过的内容以及遇到的问题。感谢您的回复，我用当前进度更新了帖子。我正在尝试了解如何将waveform.js与soundcloud播放器的清理/进度条同步。如果我有任何进展，我会更新（我需要这样做……）
myVar=setInterval(Timed,100);

function Timed() {
    total_duration = duration of the track playing;
    current_duration = the current position of the track. 
    width = canvas width;
    pointer = the id of the pointer being used to show the progress.

    position = (canvas_width / total_duration) * current_duration;

    pointer.style.left = position;
}