我正在为我的网站开发一个自定义 Soundcloud 播放器,用于waveform.js
生成波形。它工作得很好,但它缺乏洗涤器功能。我该如何添加?
我不是 JS 向导,仍在学习我的方法,所以我会非常感谢任何帮助或建议!
更新 IV:我找到了一种将画布生成的波形包含到原始 SoundCloud Custom Player 中的新方法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>
结果非常有希望,现在我有了完全可定制的波形,并且洗涤器也在工作。但是,我仍然想解决一些问题。
在 Chrome 中,当我按下播放和暂停,然后单击波形时,曲目开始播放,但播放按钮不会改变其状态。然后需要双击它来停止跟踪。
缓冲区和进度条仍然只是
sc-player
后台的 div。我怎样才能链接在一起sc-player.js
,waveform.js
以便在波形画布上生成进度(如http://waveformjs.org/上的示例)?
任何想法如何解决这些问题?
这是现场网站上的播放器:http: //www.code.spik3s.com/rnr/