用webAudio和canvas实现音频可视化

前两天遇到了要显示音频波形图的需求，因为时间紧，就直接用了wavesufer.js，这两天有空，就研究了一下怎么用webAudio实现音频的可视化。

大致流程是对音源进行解析，解析得到的数据是个频谱数组，然后使用canvas将数组形象化显示出来。

随音乐的播放不断重复上述过程，就能得到一个随着音乐不断跳动的频谱动画，非常酷炫！

废话不多说，下面上代码。

1.准备工作

首先获取各个对象：

var AudioContext = AudioContext || webkitAudioContext;
var audio = document.getElementById("snd");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

加载音频源有很多种方式，可以用file加载本地音乐，可以用ajax，这里就简单点用audio标签。

2.创建音源和解析器

var atx = new AudioContext();
var source = atx.createMediaElementSource(audio);
var analyser = atx.createAnalyser();

3.连接

连接的顺序为：音源 ==> 解析器 ==> 最终输出

source.connect(analyser);
analyser.connect(atx.destination);

直接连接音源和最终输出（比如扬声器）就可以播放声音，中间连接各种效果节点可以实现音频的各种增益，这里要实现音频可视化，就需要一个解析器。

4.可视化

这里就不得不提到解析器的fftSize属性，它的值必须是从32到32768范围内的2的非零幂; 其默认值为2048。

这个值越大，图形就越详细。

analyser.fftSize = 2048;
function draw(){
    var cWidth = canvas.width,
        cHeight = canvas.height,
        // frequencyBinCount的值固定为fftSize的一半
        audioArray = new Uint8Array(analyser.frequencyBinCount);
    // 解析频率数据，放入audioArray数组中
    analyser.getByteFrequencyData(audioArray);
    // 填充为柱状图
    ctx.clearRect(0,0,cWidth,cHeight);
    for(var i = 0;i < audioArray.length;i ++){
        ctx.fillRect(i*3,cHeight-audioArray[i],2,cHeight);
    }
    // 刷新
    requestAnimationFrame(draw);
}
draw();
audio.play();

到这里音频的可视化就完成了，其实挺简单的。

ps：上面2到4步的内容最好放到一个按钮的点击事件里，这是由于谷歌浏览器最新的安全策略。

ps2：音频可视化需要放在http或https服务器上，不用说也是出于浏览器安全性考虑...

最后附上MDN关于音频可视化的一个讲解（比我这个好多啦）：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

题外话：

写完了感觉有点儿不对劲，我本来是要实现类似wavesufer默认的那种静态效果，结果变成随音乐播放刷新的动态效果，酷炫是酷炫了，可是偏离了本意，有空再补上静态的。