具有Waveform.js和洗涤器功能的Soundcloud自定义播放器

Question

我正在为我的网站开发一个自定义的声音云播放器，使用waveform.js生成波形。它工作得很好，但缺乏洗涤器的功能。我该怎么加呢？

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

更新IV:我发现了一种将画布生成的波形包含到原始SoundCloud自定义播放器sc-player.js中的新方法。

首先，我找到了负责播放器HTML结构的一行代码，并将id="waveform"添加到第529行的sc-waveform container中：

.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>')

然后我更新了第676行，将img替换为canvas。

    $available = $scrubber.find('.sc-waveform-container canvas'),

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

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

然后我把下面的代码放在我的页面底部：

<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>

结果是很有希望的，现在我有完全可定制的波形和洗涤器也在工作。不过，我还是想解决一些问题。

1. 在Chrome中，当我按下播放和暂停，然后点击波形，轨道开始播放，但播放按钮不会改变其状态。然后需要双击它来停止轨道。
2. 缓冲区和进度条仍然只是背景中的sc-player div。我如何将sc-player.js和waveform.js链接在一起，以便在波形画布上生成进度(例如在http://waveformjs.org/上)？

有什么办法解决这些问题吗？

这是现场直播网站上的播放器：http://www.code.spik3s.com/rnr/

Answer 1

随玩呼叫

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;
}

你必须把信息放进去，但像这样的东西就行了