我正在使用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>
结果非常有希望,现在我有完全可定制的波形和洗涤器也正常工作。但是仍然有一些我想解决的问题。
sc-player
div。如何将sc-player.js
和waveform.js
链接在一起,以便在波形画布上生成进度(如http://waveformjs.org/中的示例)?任何想法如何解决这些问题?
这是现场网站上的播放器:http://www.code.spik3s.com/rnr/
在打电话
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;
}
你必须设置信息,但这样的事情会做