AudioContext + AnalyserNode 是唯一纯原生获取实时波形数据的路径，需连接音频源、设偶数 fftSize、调用 getByteTimeDomainData() 获取 0–255 幅度快照，并正确映射至 canvas 坐标；iOS Safari 不支持 MediaElementAudioSourceNode 直连，须预解码 AudioBuffer。
AudioContext + AnalyserNode 是唯一可行路径
不依赖第三方可视化库，纯原生 Web API 就能拿到音频波形数据，但必须走 AudioContext → analyserNode → getByteTimeDomainData() 这条链。直接用 <audio></audio> 标签的 currentTime 或 duration 无法获取波形；试图读取 audio.buffer 会失败——因为未解码音频源默认不提供原始 PCM 数据。
关键点在于：必须将音频源（MediaElementAudioSourceNode 或 AudioBufferSourceNode）连接到 AnalyserNode，且 analyserNode.fftSize 要设为偶数（如 256、512），否则 getByteTimeDomainData() 返回全零。
-
analyserNode.smoothingTimeConstant = 0.8可让波形更平滑，但会降低响应速度 - 调用
getByteTimeDomainData()前必须确保analyserNode已连接且音频正在播放（audio.play()后需等待playing事件） - 若用
MediaElementAudioSourceNode，注意 Safari 对跨域<audio src="..."></audio>的限制：需加crossorigin="anonymous"
canvas 绘制波形时别忽略采样长度与坐标映射
getByteTimeDomainData() 返回的是 Uint8Array，长度等于 analyserNode.fftSize，每个值范围是 0–255，对应一个采样点的幅度（已归一化）。这不是“时间轴上的振幅序列”，而是当前时刻的“单帧波形快照”——所以每帧只能画一条横贯 canvas 的线，不是整段音频的波形图。
常见错误是把这 256/512 个点直接当纵坐标画成折线，却忘了它们代表的是「一个周期内」的瞬时幅度，x 坐标应等距分布（如 i * (canvas.width / fftSize)），y 坐标要从 0–255 映射到 canvas 的可视高度（如 canvas.height / 2 - value + 128）。
立即学习“前端免费学习笔记（深入）”；
- 高频抖动？检查是否每帧都清空 canvas —— 用
ctx.clearRect(0, 0, width, height)，别只画新线不擦旧线 - 波形偏上或压扁？确认 y 映射公式：中心线应在
canvas.height / 2，0 对应顶部，255 对应底部，所以实际 y =height/2 - (value - 128) - 想画左右声道分离？
getByteTimeDomainData()不区分声道，它返回的是混合后的单声道波形；需用ScriptProcessorNode（已废弃）或AudioWorklet手动拆通道
离线生成静态波形图得先解码音频
如果目标是预渲染整首歌的波形图（比如用于播放器进度条预览），不能靠 AnalyserNode 实时采集——它只给当前帧。必须用 AudioContext.decodeAudioData() 把音频文件转成 AudioBuffer，再遍历其 buffer.getChannelData(0) 获取 PCM 数据。
注意：decodeAudioData() 返回的 AudioBuffer 默认采样率是 44.1kHz，但浏览器可能重采样；且长音频（>10MB）解码会阻塞主线程，务必用 Web Worker 搬运。
- 降采样省性能：原始 buffer 可能有上百万样本点，画缩略图只需每 100–500 点取一个最大值（峰值采样），而非全量绘制
- 避免内存爆炸：不要长期持有
AudioBuffer引用，用完及时置null，尤其在移动端 - Chrome 90+ 对
decodeAudioData()的 ArrayBuffer 输入要求严格：必须是完整音频文件二进制，不能是 Blob URL 或分片请求结果
Web Audio API 在 iOS Safari 上的硬限制
iOS Safari 不允许 AudioContext 在用户手势前启动，所以所有波形采集逻辑必须包裹在 button.addEventListener('click', () => { new AudioContext() }) 里。更麻烦的是：它不支持 MediaElementAudioSourceNode 连接到 AnalyserNode（Safari 15.4 仍报 InvalidStateError），必须改用 AudioBufferSourceNode + 预加载解码。
这意味着：想在 iOS 上实现播放中实时波形，你得提前调用 fetch(audioSrc).then(r => r.arrayBuffer()).then(buf => ctx.decodeAudioData(buf))，再手动用 source.start() 播放——失去原生 <audio></audio> 标签的流式加载和 seek 支持。
- 替代方案：用
webkitAudioContext判断兼容性，降级为仅显示简单脉冲动画（基于audio.volume或playbackRate估算） - 别信“iOS 16 已修复”的传言——实测 iOS 17.5 仍存在
MediaElementAudioSourceNode连接失败问题 - 调试时打开 Safari 开发者工具 → “Timelines” → 勾选 “Web Audio”，能看到节点连接是否成功
真实波形渲染的复杂点不在算法，而在音频生命周期管理：解码时机、上下文激活、跨域策略、iOS 权限模型、内存回收——这些环节任一卡住，canvas 上就永远是一条直线。
