我正在为我的网站使用waveform.js
生成波形的自定义Soundcloud播放器。它工作的很好,但它缺少洗涤器功能。我如何添加?具有Waveform.js和擦除功能的Soundcloud自定义播放器
我不是一个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,与canvas
img
$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/
请出示什么你已经试过了,你有什么问题。 – pascalhein
感谢您的回复,我用当前进度更新了帖子。 – spik3s
我试图找出如何同步soundcloud播放器的scrubbing/progress bar的waveform.js。如果我取得进展,我会更新(我需要这么做......) –