JavaScript 实时音频频谱图绘制教程 - 使用 Web Audio API 和 Canvas

要实时绘制音乐频谱图，首先需要获取音频数据。可以使用 Web Audio API 提供的 AnalyserNode 对象来获取音频数据。然后使用 Canvas 绘制频谱图。

以下是实现的步骤：

1. 创建 AudioContext 对象和 AnalyserNode 对象。

const audioContext = new AudioContext();
const analyserNode = audioContext.createAnalyser();

2. 将 AnalyserNode 对象连接到音频源。

const audioSource = audioContext.createMediaElementSource(audio);
audioSource.connect(analyserNode);

3. 设置 AnalyserNode 对象的参数。

analyserNode.fftSize = 2048;
analyserNode.smoothingTimeConstant = 0.8;

4. 创建 Canvas 对象。

const canvas = document.createElement('canvas');
const canvasContext = canvas.getContext('2d');

5. 在 requestAnimationFrame 中实时绘制频谱图。

function draw() {
  requestAnimationFrame(draw);

  const bufferLength = analyserNode.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  analyserNode.getByteFrequencyData(dataArray);

  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  const barWidth = (canvas.width / bufferLength) * 2.5;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const barHeight = dataArray[i];
    canvasContext.fillStyle = `rgb(${barHeight + 100},50,50)`;
    canvasContext.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);
    x += barWidth + 1;
  }
}

draw();

完整代码示例：

const audioContext = new AudioContext();
const analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 2048;
analyserNode.smoothingTimeConstant = 0.8;

const audio = new Audio('music.mp3');
audio.crossOrigin = 'anonymous';
audio.controls = true;
audio.autoplay = true;
audio.loop = true;

const audioSource = audioContext.createMediaElementSource(audio);
audioSource.connect(analyserNode);
analyserNode.connect(audioContext.destination);

const canvas = document.createElement('canvas');
const canvasContext = canvas.getContext('2d');
document.body.appendChild(canvas);

function draw() {
  requestAnimationFrame(draw);

  const bufferLength = analyserNode.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  analyserNode.getByteFrequencyData(dataArray);

  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  const barWidth = (canvas.width / bufferLength) * 2.5;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const barHeight = dataArray[i];
    canvasContext.fillStyle = `rgb(${barHeight + 100},50,50)`;
    canvasContext.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);
    x += barWidth + 1;
  }
}

draw();