java web 播放音频_用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 = newAudioContext();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;functiondraw(){var cWidth =canvas.width,

cHeight=canvas.height,//frequencyBinCount的值固定为fftSize的一半

audioArray = newUint8Array(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关于音频可视化的一个讲解(比我这个好多啦)：

题外话：

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