一个基于 Web Audio API 的实时音频可视化工具。开启麦克风后，你的声音会被转化为流动的视觉图案——支持波形、频谱和环形三种模式。
这个实验展示了声音与视觉之间的映射关系：频率对应颜色，振幅对应大小，时间对应位置。
点击按钮开启麦克风，对着麦克风说话或播放音乐
三种可视化模式
波形模式
经典的音频波形显示，实时展示声音的振幅变化。渐变色和光晕效果让波形更加生动。
频谱模式
将音频分解为不同频率的分量，用彩色柱状图显示。每个频率对应不同的颜色，顶部的光点标记峰值。
环形模式
将频谱数据映射到圆形，创造出发散式的视觉效果。高频在内圈，低频在外圈，旋转的色彩让整个图案充满动感。
工作原理
// 获取麦克风输入
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const source = audioContext.createMediaStreamSource(stream);
// 创建分析器
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
// 读取频域数据
const dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);核心是 AnalyserNode，它能实时分析音频的时域和频域数据，然后用 Canvas 绘制出来。
使用提示
- 🎤 点击”开启麦克风”按钮，允许浏览器访问麦克风
- 🎵 对着麦克风说话、唱歌或播放音乐
- 🔄 尝试不同的可视化模式
- 💡 在安静环境中，你会看到”呼吸灯”效果
技术细节
- 使用 Web Audio API 的
AnalyserNode进行音频分析 - Canvas 2D 渲染，每帧绘制
- 支持实时模式切换
- 无音频输入时显示优雅的待机动画
- 响应式设计，适配移动设备