使用html5 audio api音频可视化
在网易云上听Hello - OMFG,无意间点开了MV,看上去很动感,但是简单到就像一个前端动画。于是自己想照着做一个WEB。最终效果和源码已传至github。
动画分析
首先中间的OMFG四个字母是不动的。
两侧跳跃的图形,应该跟音频相关,这个可以和音频文件的波形、频率对应。
跳跃图形下方还有一小部分倒影,这个可以在作出上方图形后,再以其为参照来制作。
忽明忽暗的背景黑圈也是和音频相关的。
研究过程
可视化第一步:获取音频数据
先看了些文章,学会了把音频文件的数据读取出来,也就是使用audio api获取音频内容。
var AudioContext = AudioContext || webkitAudioContext;
var context = new AudioContext;
//加载媒体
var a