尝试在画布和javascript上使用圆形波纹进行音频可视化

<canvas id="visualizationCanvas"></canvas>

const canvas = document.getElementById('visualizationCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function drawVisualization(audioData) {
  const ctx = canvas.getContext('2d');
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const maxRadius = Math.min(centerX, centerY);
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制圆形波纹
  for (let i = 0; i < audioData.length; i++) {
    const radius = maxRadius * (audioData[i] / 255);
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.stroke();
  }
}

// 获取音频数据
const audioContext = new AudioContext();
const audioElement = document.getElementById('audioElement');
const audioSource = audioContext.createMediaElementSource(audioElement);
const analyser = audioContext.createAnalyser();
audioSource.connect(analyser);
analyser.connect(audioContext.destination);

// 绘制可视化
const bufferLength = analyser.frequencyBinCount;
const audioData = new Uint8Array(bufferLength);
function visualize() {
  requestAnimationFrame(visualize);
  analyser.getByteFrequencyData(audioData);
  drawVisualization(audioData);
}
visualize();