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

【问题标题】：Soundcloud Custom Player with Waveform.js and scrubber functionality具有 Waveform.js 和洗涤器功能的 Soundcloud 自定义播放器
【发布时间】：2013-05-15 07:22:11
【问题描述】：

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

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

更新 IV：我找到了一种将画布生成的波形包含到原始 SoundCloud Custom Player 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>

结果非常有希望，现在我有了完全可定制的波形，并且洗涤器也能正常工作。不过，我仍然有一些事情想要解决。

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

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

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

【问题讨论】：

请说明您已经尝试过什么以及遇到了什么问题。
感谢您的回复，我已根据当前进度更新了帖子。
我正在尝试了解如何将waveform.js 与soundcloud 播放器的擦洗/进度条同步。如果我取得任何进展，我会更新（我需要这样做......）

标签： javascript html soundcloud waveform

【解决方案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;
}

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

【讨论】：