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

最新推荐文章于 2025-10-16 10:47:31 发布

原创

最新推荐文章于 2025-10-16 10:47:31 发布 · 1.2w 阅读

CC 4.0 BY-SA版权

文章标签：

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

使用html5 audio api音频可视化

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

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

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

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

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

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

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

var AudioContext = AudioContext || webkitAudioContext;
var context = new AudioContext;
//加载媒体
var audio = new Audio("hello.