上次有见到网易云音乐的app里面更新版本之后，出现了好看的动效，样式挺好看的，像下面这样：

之前见过好多次，一直感觉很神奇。思路也是有的，不过没有亲自尝试过。下午有空找了找相关的文档，做了下面的一个不成熟的音乐播放器，实现了图示的动效。

对应的线上地址是 https://notes.tingno.com/demo/music/

由于主要是自己研究接口及功能实现，样式没有进行整理优化，js代码也是乱七八糟的堆叠出来的，右键查看源代码就是全部代码了，比较乱，见谅。另外，代码里面使用的都是es6的语法，直接建议使用chrom的高版本浏览器。如果你还是用的IE，出门不送。

核心逻辑

1. 创建音频环境对象
2. 给音频对象创建一个分析器
3. 音频对象生成音频资源（从音频文件或者麦克风）
4. 音频资源连上分析器
5. 分析器链接对象目的地 （我不是很懂为啥这么来回串啊串的）
6. 分析器将分析结果数值同步输出到指定长度的数组中了。

而拿到这个数值之后，再去怎么很漂亮的呈现，就属于绘画的部分了。 代码如下：

let array =  new Uint8Array(64);//装填数组

window.addEventListener('load', function(e) {
    
	let context1 = new AudioContext()//建立音频环境
	let analyserfa = context1.createAnalyser() //创建分析器
	let source1 = context1.createMediaElementSource($("myAudio"));  //指定具体的dom资源
	source1.connect(analyserfa)  //资源连上分析器
	analyserfa.connect(context1.destination)  //分析器连上音频对象
	drawSpectrumfa() //开始分析绘画
})

//绘画动作
function drawSpectrumfa(){
	analyserfa.getByteFrequencyData(array) //分析结果装填数组
	array.map((v,index)=>{
		$('w_'+index).style.height = v / 10 + 2 + 'px'
	});  //数组绘画
	requestAnimationFrame(drawSpectrumfa);  //循环下一次分析
}