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

Question

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

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

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

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

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

你必须设置信息，但类似这样的事情就可以了