html5 音乐可视化（跟着音乐舞动起来吧）

点击右上角的关注，不定期前端干货分享！！

在前端界当提到音视频的时候，大家最开始联想到的可能是<audio>和<video>音视频标签。But 大家可能忽视了在html5的api中有一个WebAudio的对象。可以实现时时对音频数据分析获取并可视化。效果如下面的视频(视频有音乐哦)：demo预览地址：https://aifly.github.io/toutiao/three.html

Web Audio

Web Audio API使用户可以在音频上下文(AudioContext)中进行音频操作。音频节点通过它们的输入输出相互连接，形成一个链或者一个简单的网。打个比方，我们平时一般听音乐，把耳机插在手机上，然后把耳塞塞在耳朵里，音频才可以传入到我们听觉系统里面。

而音频文件本身就是声音的采样数据，这些采样数据可以来自麦克风，也可以来自电子乐器，然后混合成一个单一的复杂的波形。

知识点：

1、获取音频上下文对象。

var ac = new (window.AudioContext || window.webkitAudioContext)();

2、创建媒体源。

var audioSrc = ac.createMediaElementSource(oAudio);//oAudio为<audio>对象

3、创建分析器。

var analyser = ac.createAnalyser();

4、我们要将刚获取到的媒体源对象和分析器对象相互链接

audioSrc.connect(analyser);

5、分析器和上下文的destination属性连接。

analyser.connect(ac.destination);

6、设置分析器的fftSize属性。

analyser.fftSize = 1024; //这个属性值一般是2的N次方。

frequencyBinCount 的值固定为analyser.fftSize值的一半. 该属性通常用于可视化的数据值的数量.也就是说 analyser.frequencyBinCount 的值为512

7、创建用于接收音频分析返回的数据。

this.arr = new Uint8Array(analyser.frequencyBinCount);

注意这里我们用了Uint8Array类型化的数组。我们平时写js程序的时候很少会用到这种数组。了解Webgl的童鞋应该知道这个类型化的数组用的比较多。

8、接下来就是要在一个循环周期函数里面不停的获取音频数据，然后将数据可视化。

(function render(){

requestAnimationFrame(render);

if (arr.length) {

analyser.getByteFrequencyData(arr);

....arr里面就会时进得到分析的音频的数据了。//dosomething

}

})();

数据的可视化载体我的这个案例里面是用的ThreeJs。因为threejs本身就是属于前端图形学的一个复杂的学科，这里就不再过多的赘述了，后面的文章我会单独分享有关ThreeJs的文章。这个案例的源代码已经在demo地址源代码中找得到。感兴趣的可以关注我，这个案例有什么问题的可以评论留言给我或者私信我哦。

总结：

1、音频的可视化和我们听音乐的步骤差不多。

2、threejs作为可视化的载体，当然我们也可以拿canvas甚至是html作为载体都是没问题的。

（全文完）

,