用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默认的那种静态效果，结果变成随音乐播放刷新的动态效果，酷炫是酷炫了，可是偏离了本意，有空再补上静态的。