python音乐可视化效果软件_AudioContext技术和音乐可视化（1）

写在最前，测试博客在这里，直接欣赏完成可视化效果。代码不日在github公开，性能目前巨烂，RadialGradient损耗巨大，优化正在提上日程。

转载注明来源。

扒掉网页上js的烦请留下js里的顶端注释谢谢。。虽然我代码是写的挺烂的。如果转发到别的地方了能注明一下作者和来源的话我会很开心的。

Intro

因为自己搭了个博客，一时兴起，就想写个动态的博客背景。毕竟用django后端渲染，前端只有jquery和bootstrap已经够low了，虽说极简风格也很棒，但是多少有点亮眼的东西才好和别人吹牛不是吗。

为了方便讲解，整个思路分为两个部分：音乐播放和背景绘制。

一、音乐播放

1.1 AudioContext

概述部分懒得自己写，参考MDN的描述。

AudioContext接口表示由音频模块连接而成的音频处理图，每个模块对应一个AudioNode。AudioContext可以控制它所包含的节点的创建，以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象，因为一切都发生在这个环境之中。

1.2 浏览器支持状况

AudioContext标准目前还是草案，不过新chrome已经实现了。我使用的chrome版本如下。

版本 70.0.3538.77(正式版本) (64 位)

如果发现console报错或者其他问题请检查浏览器版本，所有支持的浏览器可以在这个链接查看。

1.3 AudioContext和音频处理图

关于AudioContext我的了解不是很深入，所以只在需要用到的部分进行概述。

首先，关于音频处理图的概