HTML5 Canvas 实现简易 绘制音乐环形频谱图

参考资料:
1.Web 技术研究所
2.Web_Audio_API

0.启发

在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。

HTML5 Canvas 实现简易 绘制音乐环形频谱图_第1张图片
B站截图
HTML5 Canvas 实现简易 绘制音乐环形频谱图_第2张图片
B站截图
HTML5 Canvas 实现简易 绘制音乐环形频谱图_第3张图片
B站截图

所以今天我就用 Canvas 做个简单 环形频谱图。

那么~ ヾ(o・ω・)ノ 开始吧!

1.首先绘制静态的效果

HTML5 Canvas 实现简易 绘制音乐环形频谱图_第4张图片
静态效果

绘制静态效果很简单,我们只要从一点出发根据一定角度绘制线条,然后画个圆从中点开始覆盖线条就行了



2.调用AudioAPI,绘制音乐的频谱图

HTML5 Canvas 实现简易 绘制音乐环形频谱图_第5张图片
绘制音乐的频谱图

第一步完成后,第二步就很简单了,通过调用AudioAPI获取音频变化来改变线条长度。

注意!!!最新chrome浏览器可能需要在http服务器上运行~

你可以参考文章绘制音乐的频谱图(使用Analyser节点)





3.环形左右同步显示

实习步骤2后其实已经完成一大半了,不过细心的小伙伴们会发现环形最右端点上的线条间差了好多。


HTML5 Canvas 实现简易 绘制音乐环形频谱图_第6张图片
demo

处理办法很多,我们用其中一个简单的办法处理,那就是让其左右对称的显示。





HTML5 Canvas 实现简易 绘制音乐环形频谱图_第7张图片
效果

4.添加波形图

最后我们来尝试在圈内,添加一个波形图

你可以参考文章绘制音乐的波形图(使用Analyser节点)

HTML5 Canvas 实现简易 绘制音乐环形频谱图_第8张图片
示例





5.尝试波形反向显示

如果是波形向圆形内显示 又改如何实现呢?
起始也很简单稍微改下上面的代码就可以了

首先我们要去掉圆形覆盖,用空心圆代替





HTML5 Canvas 实现简易 绘制音乐环形频谱图_第9张图片
示例

接下去就简单了 只要让圆半径减去对应值就行了



 

HTML5 Canvas 实现简易 绘制音乐环形频谱图_第10张图片
示例

6.双向显示

既然实现了反向显示了那双向显示也就很简单了



 

HTML5 Canvas 实现简易 绘制音乐环形频谱图_第11张图片
示例
添加自己的创意
HTML5 Canvas 实现简易 绘制音乐环形频谱图_第12张图片
添加自己的创意

(o゚v゚)ノ 大家可以参考着尝试自己DIY一个好玩的播放器出来

你可能感兴趣的:(HTML5 Canvas 实现简易 绘制音乐环形频谱图)