如何创建JavaScript音频可视化工具？

我一直在四处寻找一些解决方案，但实际上没有找到多少。我想要一些非常简单的东西，如下图所示。有人在项目中使用过吗？有什么建议或API我可以使用吗？谢谢

以下是基础：

• 你需要一块帆布
• 您需要画布上下文
• 您需要音频上下文

var canvas=document.createElement（“canvas”）；
画布宽度=500；
高度=180；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“黑色”；
ctx.strokeStyle=“白色”；
ctx.lineCap=“圆形”；
var-auctx；
window.onload=（）=>{
document.body.appendChild（画布）；
auctx=new（window.AudioContext | | window.webkitadiocontext）（）；
startAudio（）；
}
var缓冲器，src，分析仪，buffLen；
var-barWidth，数据数组；
函数startAudio（）{
变量url="https://cf-media.sndcdn.com/cTGZiRbnSouE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vY1RHWmlSYm5Tb3VFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE1MTk5NTQ5NjB9fX1dfQ__&Signature=JmNkAHzih0~f3lqvvpxfetiuvumxbwlbqizsxbc6lfixjrlqa3wugp5-xAkt7AUlhiYxu~Wscc6MfQTTc527DHJURMpdqvdXv61ll-WJqoV1V-tpWSa~qR-NEAWGCBVRGE0BKRRASHOFLJELNCVO3DJZH7LSTPMLV-MtbFV2k-PiY0vrY1LuicAOcfEtXYTiMBkg-RHZKEHFCHYT2NB2HMIMWFI1CFG74FBIXTNVPAG2YO0R-LeiirWvSgewkIu~ZPZAVYJNPJN1Y-ZGNBFIB1MPVHTB5WKHTXF5LFTHGUHNUK2YBESR-1OH9GLYYE-7dxdIXx~A1LDAāāāāāāāāāāā
var request=new XMLHttpRequest（）；
打开（'GET'，url，true）；
request.responseType='arraybuffer'；
request.onload=函数（）{
auctx.解码音频数据（请求、响应、功能（缓冲区）{
缓冲区=缓冲区；
src=auctx.createBufferSource（）；
src.buffer=缓冲区；
src.loop=false；
src.connect（auctx.destination）；
src.start（0）；
Analyzer=auctx.createAnalyzer（）；
src.连接（分析仪）；
分析仪连接（auctx.目的地）；
Analyzer.fftSize=256；
buffLen=分析仪频率b计数；
dataArray=新的Uint8Array（buffLen）；
杆宽=（500-2*buffLen-4）/buffLen*2.5；
ctx.lineWidth=条宽；
draw（）；
});
}
request.send（）；
}
函数绘图（）{
ctx.fillRect（0,0500180）；
分析仪。GetByTefFrequencyData（数据阵列）；
对于（变量i=0；i

画布{
背景：黑色；
}

我想这可能就是您要找的。对不起，我来晚了一点

//音频上下文
window.AudioContext=（window.AudioContext | |
window.webkitadiocontext |
window.mozAudioContext | |
window.oAudioContext ||
window.msAudioContext）；
如果（！AudioContext）警报（'此网站无法在您的浏览器中运行。请尝试使用最新的Chrome或Firefox。'）；
var audioContext=新的audioContext（）；
var currentBuffer=null；
//帆布
var canvasWidth=window.innerWidth，canvasHeight=120；
var newCanvas=createCanvas（画布宽度、画布高度）；
var-context=null；
window.onload=appendCanvas；
函数appendCanvas（）{document.body.appendChild（newCanvas）；
context=newCanvas.getContext（'2d'）；}
//加载声音文件的函数
//请注意，由于某些原因，该程序不会从weebly网站加载声音文件，因此您必须将这些文件添加到github或其他任何地方，并使用原始音频文件
函数loadMusic（url）{
var req=新的XMLHttpRequest（）；
请求打开（“获取”，url，true）；
req.responseType=“arraybuffer”；
req.onreadystatechange=功能（e）{
如果（req.readyState==4）{
如果（请求状态==200）
audioContext.decodeAudioData（请求响应，
功能（缓冲区）{
currentBuffer=缓冲区；
显示缓冲区（buffer）；
}，编码错误）；
其他的
警报（“加载过程中出错。url错误或跨来源问题”）；
}
} ;
请求发送（）；
}
函数onDecodeError（）{alert（'解码文件时出错'）；}
//音乐显示
函数displayBuffer（buff/*是音频缓冲区*/）{
var抽绳=500；
var leftChannel=buff.getChannelData（0）；//描述左通道的Float32Array
var lineOpacity=画布宽度/leftChannel.length；
context.save（）；
context.fillStyle='#080808'；
fillRect（0,0，画布宽度，画布高度）；
context.strokeStyle='#46a0ba'；
context.globalCompositeOperation='lighter'；
翻译（0，画布高度/2）；
//context.globalAlpha=0.6；//lineOpacity；
context.lineWidth=1；
var totallength=leftChannel.length；
var eachBlock=数学楼层（总长度/抽绳）；
var lineGap=（画布宽度/抽绳）；
context.beginPath（）；
对于（var i=0；i