https://github.com/alex2wong/vudio.js 以上面的Github项目作为基础,开发一个简单的网易云可视化工具

最近在Github上看到了一个音乐可视化前端库:
https://github.com/alex2wong/vudio.js
效果有点炫酷: 本人是非常喜欢将音频可视化的效果,联想到之前的网易云地址解析API,决定将两者结合,做个简单的网易云音乐可视化小工具。 今天将制作过程记录一下。 以下是演示效果:
https://static.cdnjs.cloud/2020104_box/6f27a474b6a546c71ea3b6951a16e813_2020-10-04-16-55-23.mp4_2020-10-04-16-55-23.mp4
除此之外,我也将它推送到了Gitee Page上,你可以通过以下地址体验(受限于网易云地址解析API,无法播放VIP音乐,有点遗憾):
https://txb582.gitee.io/%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90%E5%8F%AF%E8%A7%86%E5%8C%96/index.html

大体思路是: 1、可视化工具获取用户输入的网易云分享链接。 2、调用解析API将分享地址解析为音乐真实地址实现播放。 3、调用vudio.js将音乐可视化。 解析API和可视化库都准备好了,主要的开发工作就只有可视化工具页面的开发 在该工具中,用到了以下东西:
-axios网络请求库 -网易云地址解析API -音频可视化库vudio.js

建立常用的目录结构

页面结构

页面主要分为两大块 1、可视化动画区域 2、悬浮于右侧的可收拉菜单 页面布局代码

然后在可视化区域添加