使用html5 audio api音频可视化： Hello by OMFG

最新推荐文章于 2024-07-03 17:02:31 发布

2byte

最新推荐文章于 2024-07-03 17:02:31 发布

阅读量1.2w

点赞数 6

分类专栏：前端自习室 HTML5 文章标签： html5 可视化 audio

本文链接：https://blog.csdn.net/twoByte/article/details/62043425

版权

本文介绍了如何使用HTML5的Audio API进行音频可视化，通过分析音频数据并利用canvas进行绘制，创建了一个类似网易云音乐MV的效果。作者详细讲解了获取音频数据、绘制频谱的过程，以及遇到的问题和解决方案，包括文字动画的CSS3实现和页面的自适应优化。

摘要由CSDN通过智能技术生成

使用html5 audio api音频可视化

在网易云上听Hello - OMFG，无意间点开了MV，看上去很动感，但是简单到就像一个前端动画。于是自己想照着做一个WEB。最终效果和源码已传至github。

首先中间的OMFG四个字母是不动的。

两侧跳跃的图形，应该跟音频相关，这个可以和音频文件的波形、频率对应。

跳跃图形下方还有一小部分倒影，这个可以在作出上方图形后，再以其为参照来制作。

忽明忽暗的背景黑圈也是和音频相关的。

可视化第一步：获取音频数据

先看了些文章，学会了把音频文件的数据读取出来，也就是使用audio api获取音频内容。

var AudioContext = AudioContext || webkitAudioContext;
var context = new AudioContext;
//加载媒体
var a

关注

专栏目录