这次给大家带来h5的canvas如何实现绘制音乐环形频谱图，h5canvas实现绘制音乐环形频谱图的注意事项有哪些，下面就是实战案例，一起来看一下。
在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。
所以今天我就用 Canvas 做个简单 环形频谱图。
那么~ ヾ(ｏ･ω･)ﾉ 开始吧！
1.首先绘制静态的效果
静态效果
绘制静态效果很简单,我们只要从一点出发根据一定角度绘制线条,然后画个圆从中点开始覆盖线条就行了
2.调用AudioAPI,绘制音乐的频谱图
绘制音乐的频谱图
第一步完成后，第二步就很简单了,通过调用AudioAPI获取音频变化来改变线条长度。
注意！！！最新chrome浏览器可能需要在http服务器上运行~
你可以参考文章绘制音乐的频谱图（使用Analyser节点）
3.环形左右同步显示
实习步骤2后其实已经完成一大半了,不过细心的小伙伴们会发现环形最右端点上的线条间差了好多。
处理办法很多,我们用其中一个简单的办法处理,那就是让其左右对称的显示。
4.添加波形图
最后我们来尝试在圈内,添加一个波形图
你可以参考文章绘制音乐的波形图（使用Analyser节点）
示例
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
