使用js写一个音乐音谱图

我们经常看到在听乐音的时候，会有音谱图随着音乐的节奏不断变化给人视觉上的享受，那么我们通过js来实现以下这个效果，下面是简单的效果图

 首先我们需要有一个绘制音频的函数

function draw() {
// 请求下一帧动画
animationId = requestAnimationFrame(draw);

// 获取音频频谱数据
analyser.getByteFrequencyData(dataArray);

// 清空画布
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 计算每个频谱条的宽度
var barWidth = (canvas.width / bufferLength) * 2.5;
var barHeight;
var x = 0;

// 遍历频谱数据数组，绘制频谱条
for (var i = 0; i < bufferLength; i++) {
// 计算频谱条的高度
barHeight = dataArray[i] / 255 * canvas.height;

// 根据频谱条的索引值计算颜色（彩虹色）
var hue = i / bufferLength * 360;
ctx.fillStyle = 'hsl(' + hue + ', 100%, 50%)';

// 绘制频谱条矩形
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

// 更新下一个频谱条的起始位置
x += barWidth + 1;
}
}