Canvas 使用clearRect和AudioContext绘制清晰路径

我有这个可视化工具，一切都很好。唯一的问题是，当您使用clean函数清除画布，然后单击changeSrc时，您始终可以看到上一首歌中的可视化工具。我能处理掉这个吗

您可能需要在js fiddle上运行它

var rendervizalizationid，
画布、ctx、中心x、中心y、半径、条形、，
x_端、y_端、条形高度、条形宽度、，
频率阵列，
包裹，来源；
换行=$（'.w'）
canvas=document.getElementById（“渲染器”）；
ctx=canvas.getContext（“2d”）；
钢筋=200；
钢筋宽度=2；
乘数=0.7；
音频=新音频（）；
audio.crossOrigin=“匿名”；
context=new（window.AudioContext | | window.webkitadiocontext）（）；
Analyzer=context.createAnalyzer（）；
audio.src=”https://api.soundcloud.com/tracks/42328219/stream?client_id=b1495e39071bd7081a74093816f77ddb"; // 源路径
audio.loop=true；
source=context.createMediaElementSource（音频）；
源。连接（分析仪）；
分析器.连接（上下文.目的地）；
频率_阵列=新的UINT8阵列（分析仪频率b计数）；
音频播放（）；
animationLooper（）；
函数animationLooper（）{
//设置为设备的大小
canvas.width=wrap.width（）；
canvas.height=wrap.height（）；
//找到窗口的中心
中心x=canvas.width/2；
中心y=画布高度/2；
半径=画布高度/6；
//画圈
ctx.beginPath（）；
弧（中心x，中心y，半径，0，2*Math.PI）；
ctx.stroke（）；
分析仪。GetByTefFrequencyData（频率阵列）；
var i；
对于（i=0；i
.w{
位置：相对位置；
排名：0；
左：0；
宽度：400px；
高度：400px；
背景：#ccc；
}
#渲染器{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：#111；
背景：#1D4350；
}
之所以会发生这种情况，是因为您的音频分析仪是通过缓冲数据来工作的，它只是随着时间的推移而取消移动新数据。因此，当您暂停音频时，它仍将包含一些数据

为了避免这种情况，您只需在
clean
功能中创建一个新的音频分析仪即可


var rendervizalizationid，
画布、ctx、中心x、中心y、半径、条形、，
x_端、y_端、条形高度、条形宽度、，
频率阵列，
包裹，来源；
换行=$（'.w'）
canvas=document.getElementById（“渲染器”）；
ctx=canvas.getContext（“2d”）；
钢筋=200；
钢筋宽度=2；
乘数=0.7；
音频=新音频（）；
audio.crossOrigin=“匿名”；
context=new（window.AudioContext | | window.webkitadiocontext）（）；
Analyzer=context.createAnalyzer（）；
audio.src=”https://api.soundcloud.com/tracks/42328219/stream?client_id=b1495e39071bd7081a74093816f77ddb"; // 源路径
audio.loop=true；
source=context.createMediaElementSource（音频）；
源。连接（分析仪）；
分析器.连接（上下文.目的地）；
频率_阵列=新的UINT8阵列（分析仪频率b计数）；
音频播放（）；
animationLooper（）；
//在画布上绘图时，请勿更改画布的大小
//这将重置整个画布，并需要一个新的像素缓冲区
//所以，只有在真正需要的时候才这样做
window.onresize=函数（）{
//设置为设备的大小
canvas.width=wrap.width（）；
canvas.height=wrap.height（）；
};
onresize（）；
函数animationLooper（）{
ctx.clearRect（0,0，canvas.width，canvas.height）
//找到窗口的中心
中心x=canvas.width/2；
中心y=画布高度/2；
半径=画布高度/6；
//画圈
ctx.beginPath（）；
弧（中心x，中心y，半径，0，2*Math.PI）；
ctx.stroke（）；
分析仪。GetByTefFrequencyData（频率阵列）；
var i；
对于（i=0；i