使用Web Audio API和Canvas实现实时音频可视化，首先创建AudioContext并连接音频源与AnalyserNode，再通过fftSize设置频率分辨率，利用Uint8Array获取频域或时域数据，最后在Canvas上结合requestAnimationFrame循环绘制频谱柱状图或波形图，实现动态可视化效果。
要在浏览器中实现实时音频可视化，核心是使用 Web Audio API 中的 AudioContext 搭配 AnalyserNode 来获取音频的时域或频域数据，再结合 Canvas 或 WebGL 将其绘制成图形。
创建 AudioContext 并接入音频源
第一步是初始化一个 AudioContext，并将音频源（如 <audio> 元素、麦克风输入或在线流）连接到分析节点。
示例：从页面上的 audio 元素获取声音const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const analyser = audioContext.createAnalyser(); const audioElement = document.getElementById('myAudio'); const source = audioContext.createMediaElementSource(audioElement); source.connect(analyser); analyser.connect(audioContext.destination); // 保持声音输出
配置 AnalyserNode 获取音频数据
analyser 节点能提供实时的波形（时域）和频率（频域）数据。你需要设置参数并创建数据容器。
analyser.fftSize = 2048; const bufferLength = analyser.frequencyBinCount; const frequencyData = new Uint8Array(bufferLength); const timeDomainData = new Uint8Array(bufferLength);
说明：- fftSize 决定频率分辨率，值越大细节越多，但性能开销略高
- frequencyBinCount 是 fftSize 的一半，表示可获取的频率区间数量
- Uint8Array 存储 0–255 的字节数据，适合 Canvas 绘图
用 Canvas 实时绘制可视化效果
通过 requestAnimationFrame 循环读取分析数据，并在 canvas 上绘制波形或频谱柱状图。
示例：绘制频谱柱状图
const canvas = document.getElementById('visualizer'); const ctx = canvas.getContext('2d'); function draw() { requestAnimationFrame(draw); analyser.getByteFrequencyData(frequencyData); // 获取频域数据 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.fillRect(0, 0, canvas.width, canvas.height); const barWidth = canvas.width / bufferLength * 2.5; let x = 0; for (let i = 0; i
扩展建议
你可以根据需求进一步优化：
- 使用 getByteTimeDomainData 绘制声波波形（oscilloscope 效果）
- 调整 smoothingTimeConstant 控制数据变化平滑度（默认 0.8）
- 接入麦克风：用 navigator.mediaDevices.getUserMedia 获取音频流
- 添加响应式设计，适配不同屏幕尺寸的 canvas
- 使用 WebGL 提升复杂动画性能（如频谱旋转、粒子系统）
基本上就这些。只要正确连接 AudioContext、analyser 和渲染循环，就能实现流畅的音频可视化。关键是理解数据如何从声音流转为可视数组，再映射到图形上。不复杂但容易忽略细节，比如记得 resume AudioContext（某些浏览器需用户交互后才能播放）。
