<audio>标签本身不能生成频谱图，需通过Web Audio API的AnalyserNode分析音频流，并用Canvas实时绘制。具体步骤：1. 创建AudioContext并用createMediaElementSource连接audio元素；2. 配置AnalyserNode的fftSize和smoothingTimeConstant；3. 用getByteFrequencyData获取数据，Canvas循环绘制条形图；4. 注意移动端需用户手势触发、跨域设置crossOrigin等限制。
直接用 <audio> 标签本身无法生成频谱图，它只负责播放。要实现频谱可视化，必须把 <audio> 的音频流接入 Web Audio API 的分析节点（AnalyserNode），再通过 Canvas 实时读取频率数据绘制图形。
1. 创建音频上下文并连接 audio 元素
关键点是用 AudioContext.createMediaElementSource() 把原生 <audio> 转成 Web Audio 可处理的源节点，不能直接操作 src 属性播放：
- 先初始化
AudioContext（注意移动端需用户手势触发） - 获取
<audio>元素，调用context.createMediaElementSource(audioEl) - 将该源节点连接到
AnalyserNode，再连到context.destination（否则无声）
2. 配置 AnalyserNode 获取频谱数据
AnalyserNode 是核心分析器，需手动设置参数才能输出有意义的频谱：
-
analyser.fftSize = 2048：决定频点数量（必须是 2 的幂，越大分辨率越高） -
analyser.smoothingTimeConstant = 0.8：控制时间平滑度（0～1，值越大曲线越柔和） - 用
analyser.frequencyBinCount获取实际可用频点数（=fftSize / 2） - 每次绘制前调用
analyser.getByteFrequencyData(array)填充 Uint8Array（0～255）
3. 用 Canvas 绘制实时频谱条形图
频谱数据是线性分布的频率幅度，适合画成竖直或水平条形图：
立即学习“前端免费学习笔记（深入）”；
- 创建
<canvas>并获取 2D 上下文 - 循环遍历
frequencyBinCount个数据点，每个点对应一个频段（如 0～22050Hz 均分） - 按数值缩放高度（如
height * freqData[i] / 255），用fillRect或lineTo绘制 - 用
requestAnimationFrame持续重绘，保持 60fps 流畅动画
4. 注意事项与常见问题
实际开发中容易卡在几个细节上：
- 移动端需在用户点击/触摸后才可启动
AudioContext，否则被静音策略阻止 -
<audio>必须设置crossOrigin="anonymous"才能跨域加载音频（否则 analyser 返回全零） - 若想分析麦克风输入，需用
navigator.mediaDevices.getUserMedia({audio:true})替代 media element source - 频谱是幅度谱，不是相位谱；如需更精细分析（如波形、滤波），可配合
ScriptProcessorNode（已弃用）或AudioWorklet
