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

Question

我正在为我的网站开发自定义 Soundcloud 播放器，使用 waveform.js 生成波形。它工作得很好，但缺少洗涤器功能。我该如何添加？

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

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

首先，我找到了一行负责播放器 HTML 结构的代码，并在第 529 行将 id="waveform" 添加到 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 链接在一起，以便在波形 Canvas 上生成进度(如 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;
}

您必须在其中设置信息，但像这样就可以了