必须用Web Audio API+Canvas实时绘制波形，因<audio>标签不提供真实采样点；getByteTimeDomainData()返回全0是因analyserNode未正确连接音频源且未在用户手势中调用resume()，fftSize需设为偶数并早于首次调用，crossorigin="anonymous"必加，y坐标映射应为centerY+(value-128)，需清空画布、适配devicePixelRatio并关闭抗锯齿；静态图需decodeAudioData后下采样取包络线；须监听AudioContext状态避免冻帧。
必须用 Web Audio API + Canvas 实时绘制，其他任何方式都拿不到真实波形数据——<audio> 标签自身不提供采样点，CSS 动画或伪元素模拟全是假的。
为什么 getByteTimeDomainData() 总是返回全 0？
这是最常卡住的一步。根本原因不是代码写错，而是音频图没真正连通：
-
analyserNode必须显式连接到音频源节点（如MediaElementAudioSourceNode），不能只连destination - 必须在用户手势（
click、touchstart）回调里调用audioContext.resume()，否则 iOS 和 Chrome 都会静音并冻结分析数据 -
analyserNode.fftSize必须设为偶数（如256、512），且要早于首次调用getByteTimeDomainData()设置；默认值2048在移动端容易卡顿 - 如果用
<audio>元素，需加crossorigin="anonymous"属性，否则 Safari 会拒绝连接
Canvas 绘制波形线时 y 坐标总画偏？
getByteTimeDomainData() 返回的是 Uint8Array，值域为 0–255，其中 128 对应零点（静音），不是 0 或 255。直接映射到 canvas 高度会导致波形挤在顶部或底部。
- 正确映射公式：
y = centerY + (value - 128)，其中centerY = canvas.height / 2 - 别漏掉
ctx.clearRect(0, 0, canvas.width, canvas.height)，否则旧帧残留造成拖影 - 移动端要注意
devicePixelRatio：canvas 的width/height属性要乘以该值，再通过style.width控制显示尺寸，否则线条模糊 - 关闭抗锯齿提升锐度：
ctx.imageSmoothingEnabled = false
静态波形图（整首歌预览）怎么生成？
这不是实时分析，而是离线解码 + 下采样。关键在于别把几百万个采样点全塞进 canvas：
立即学习“前端免费学习笔记（深入）”；
- 用
fetch()加载音频二进制，传给audioContext.decodeAudioData()得到AudioBuffer - 调
buffer.getChannelData(0)拿到Float32Array，值域-1.0 ~ +1.0 - 计算缩放比：
step = Math.ceil(buffer.length / canvas.width)，然后每step个点取一次极值（max和min）组成上下包络线 - 避免用
Math.max(...slice())这类高开销操作，改用循环遍历求极值，否则长音频会卡死 - iOS Safari 对大文件
decodeAudioData()有 stricter 限制，务必加try/catch并 fallback 到预设占位数据
最容易被忽略的其实是生命周期管理：标签页切换、播放暂停、系统休眠都会让 AudioContext 暂停，此时 analyserNode 数据冻结，但 requestAnimationFrame 还在跑。得监听 audioContext.state 变化，suspended 时停掉绘图循环，running 时恢复——否则用户切回来第一眼看到的是“冻住的波形”。
