阶段 6 · 声音图基础22 分钟
音频分析：把听不见的数据画出来
AnalyserNode、波形、频谱与 FFT Size
将 AnalyserNode 插入声音图，读取时域与频域数据，并绘制实时波形和频谱。
LEARNING GOALS
先明确本课目标
1
读取 time-domain 与 frequency 数据
2
理解 fftSize 与 frequencyBinCount
3
把采样数组映射到 Canvas
MENTAL MODEL · 再建立心智模型
AnalyserNode 像信号线旁的一只示波器：它读取经过的声音但不改变声音，JavaScript 定期取走一帧分析结果来可视化。
MINIMAL EXAMPLE
频谱数组的每个下标代表什么？
AnalyserNode 用 FFT 把最近的时域窗口拆成从 0 Hz 到 Nyquist 频率的一组 bin；数组下标对应频率区间，值表示映射后的能量。
javascriptconst analyser = context.createAnalyser();
analyser.fftSize = 2048;
const bins = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(bins);
const hzPerBin = context.sampleRate / analyser.fftSize;- 选择窗口大小 更大 fftSize 提供更多频率 bin，但时间窗口也更长。
- 复用同一数组 每个动画帧把最新分析结果写入预分配 TypedArray。
- 换算真实频率 第 i 个 bin 的中心频率约为 i × sampleRate / fftSize。
Canvas 能把频率数组映射为柱形图，并能把峰值下标换算成近似 Hz。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
音视频基础AudioNodeWeb Audio 图中的声音源、处理器、分析器或输出节点，通过 connect 建立信号流。音视频基础AnalyserNode旁路读取 Web Audio 信号时域或频域快照的节点，不会改变经过它的声音。音视频基础FFT把一段时域采样分解为多个频率分量的快速傅里叶变换，常用于频谱与特征分析。音视频基础Time Domain按时间顺序观察音频采样幅度的表示，适合绘制波形、包络并识别瞬态变化。音视频基础Frequency BinFFT 结果中的一个离散频率区间；第 k 个 bin 对应的中心频率由采样率和 FFT Size 决定。音视频基础Decibel分贝（dB）是表达功率或幅度比值的对数单位；数字音频常用 dBFS，以满刻度为 0 dBFS。音视频基础FFT Size执行一次 FFT 时使用的时域采样数量；更大的 FFT Size 提供更细的频率间隔，但时间窗口更长、响应更慢。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
根据低、中、高三个频段能量驱动一个音乐可视化配色系统。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
时域看形状，频域看成分
时域数组描述每个采样点的瞬时振幅；FFT 把窗口分解为频率 bin，适合频谱、节拍和特征分析。
可视化刷新率不等于音频采样率
音频线程以数万 Hz 渲染，Canvas 通常只需跟随屏幕刷新。AnalyserNode 在两者之间提供最近一段数据的快照。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
听觉输出与视觉分析消费同一信号，但运行在不同刷新尺度。
WebGL
分析支路定期读取时域或频域快照，把高采样率信号压缩成屏幕可视信息。
WebGPU
媒体播放关注持续、无爆音地把样本送到扬声器。
分析循环应复用数组并允许丢掉视觉帧，不能反过来阻塞音频渲染。