音频可视化实战

网页音频接口最有趣的特性之一它就是可以获取频率、波形和其它来自声源的数据

要从你的音频源获取数据，你需要一个 AnalyserNode 节点，它可以用 AudioContext.createAnalyser() 方法创建，比如：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

把节点 node 连接到声音源，比如：

source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);

分析器节点 (Analyser Node) 不一定输出到另一个节点

分析器节点 (Analyser Node) 将在一个特定的频率域里使用快速傅立叶(Fast Fourier Transform (FFT) ) 变化 来捕获音频数据， 这取决于你给 AnalyserNode.fftSize 属性赋的值（默认 2048）

要捕获数据，你需要使用 AnalyserNode.getFloatFrequencyData() 或 AnalyserNode.getByteFrequencyData() 方法来获取频率数据，用 AnalyserNode.getByteTimeDomainData() 或 AnalyserNode.getFloatTimeDomainData() 来获取波形数据。