在html5中使用javascript/jQuery制作波形类似Soundcoud的播放器

我想让音频播放器看起来像Soundcloud播放器，使用javascript/jQuery和html5画布从mp3文件生成波形。我知道在stackoverflow上有很多像我一样的问题，但没有人能找到真正的答案

---

这是我做的，但不是很好。

var imgBg=new Image（），
imgFg=新图像（），
计数=2；
imgBg.onload=imgFg.onload=init；
imgBg.src=”http://www.filetolink.com/605b7afaa1";
imgFg.src=”https://files.fm/thumb_show.php?i=5ddxxmmn";
函数init（）{
if（--count）return；//确保两个映像都已加载
var canvas=document.querySelector（“canvas”），
ctx=canvas.getContext（“2d”），
音频=document.querySelector（“音频”）；
canvas.width=imgBg.naturalWidth；
canvas.height=imgBg.naturalHeight；
render（）；
audio.volume=0.5；
addEventListener（“时间更新”，呈现）；
函数render（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（imgBg，0,0）；
//计算进度
var pst=audio.currentTime/audio.duration；
//绘制顶部图像的剪裁版本
如果（pst>0）{
ctx.drawImage（imgFg，0，0，（canvas.width*pst）| 0，canvas.height，//source
0,0，（canvas.width*pst）| 0，canvas.height）；/dst
}
}
}

body{背景：#ccc}
画布{宽度：600px；高度：自动；背景：#cccc}

---

如果你想像soundcloud一样，别忘了无论有多困难，你都会像一个复制品。 把这两部分分开。 使用波形构建播放器。 第二，让你的光标看起来像一个指针，无论你在哪里点击，你都可以根据你在歌曲中的百分比发布评论。 抱歉，因为我是法国人，但这样想我想你会更容易理解你必须做的事情

看看这个：