Web Audio AnalyserNode：频谱与波形分析

概述AnalyserNode 提供频域与时域数据读取能力。通过设置 FFT 大小与平滑常量，配合动画循环实现实时可视化。用法/示例const ctx = new AudioContext()

const src = ctx.createMediaElementSource(document.querySelector('audio'))

const analyser = ctx.createAnalyser()

analyser.fftSize = 2048

const buffer = new Uint8Array(analyser.frequencyBinCount)

src.connect(analyser).connect(ctx.destination)

function draw() {

requestAnimationFrame(draw)

analyser.getByteFrequencyData(buffer)

// 绘制频谱...

}

draw()

工程建议根据设备能力选择合适的 `fftSize` 与平滑参数；在低端设备降低刷新频率。避免在主线程做大量绘制；必要时采用 OffscreenCanvas 或 WebGL。处理暂停与销毁，释放节点与资源；确保用户交互可达与无障碍。参考与验证MDN：AnalyserNode — https://developer.mozilla.org/docs/Web/API/AnalyserNodeWeb Audio API — https://www.w3.org/TR/webaudio/