Web应用实例：音频可视化

准备

　　语言：TypeScript

　　工具：Visual Studio Code

　　演示：Audio Visualiazer

　　小明告诉我，他希望打开一个网页，立即听到他喜欢的音乐，如果有视觉特效就更棒了。

第一节本地音频

　　“可是我的电脑里没有 MP3 文件！”

　　“为什么需要打开一个本地文件？”小明问。

　　“我不知道你喜欢听什么。”

　　“...既没有音频资源的版权。”

　　“...也没有足够的服务器带宽。”

　　“...更无法向你解释什么是跨域访问限制。”

　　...

　　“总之，你只能先去其他网站下载一个 MP3 文件，然后拖进来。”我说。

　　“那我为什么不直接在其他网站听？？？”他困惑道。

　　“听起来不错。”

图1-1 启动视图

第二节频谱变换

　　通过傅里叶变换将时域数据变换到频域。

　　“无所谓了，我最希望的是有炫酷的视效。”小明说。

　　“什么是炫酷？”

　　“听听你的想法。”小明回答。

　　“下一代，未来，前所未有的。”

　　“感觉还行，你会怎么呈现视觉效果呢？”小明接着问。

　　“自由地绘制。”

　　“什么意思？”

　　“通俗点讲，想怎么画就怎么画。”

　　“......”

图2-1 时域数据

图2-2 频域数据

第三节历史轨迹

　　像素保留历史，并向四周弥散。

　　“这就是你说的下一代？”小明有些失望。

　　“不是。下一代总是建立在已有的设计上，然后小心翼翼地加入一些变化。”

　　“哦，那会有什么变化呢？”

　　“我已经掌握了一种成熟的变化技巧。”

　　“整体效果像是石头抛入平静的水面，水波逐渐蔓延开来。”

　　“有没有合适的名字，我可不喜欢《下一代频谱》。”

　　“当然，‘下一代’只是我们的内部代号，它叫《水波粼粼》。”

图3-1 扩散示例一

图3-2 扩散示例二

图3-3 扩散示例三

第四节旋转

　　将旋转矩阵作用于整个画面。

　　“你刚才提到小心翼翼，有没有大胆的设计呢？”

　　“有的，我管它们叫‘实验性质的特性’。”

　　“首先是旋转，让整个画面旋转起来。”

　　“有的人不喜欢旋转，那会让他感到眩晕。”小明质疑道。

　　“是的，对用户来说，这就像 EDM 和轻音乐的区别。”

　　“还有吗？”

　　“把任意两个场景混在一起。我有个飞鸟场景，鸟儿随音乐起舞，是不是很棒？”

　　“我不看好它，这有些难以理解。”

　　“如果用户不喜欢，你会移掉它们的对吗？”小明接着问。

　　“很敏锐，实验性质的特性只会有两个结果。”

　　“...即在未来的版本中得到加强，或者彻底移除。”

图4-1 旋转

图4-2 场景混叠

第五节移动端适配

　　限于移动端的硬件水准，对此不要抱有太多幻想。

　　“移动端是潮流，还有其他特性吗？”

　　“本地化支持。界面上的文字和使用习惯根据浏览器语言调整。”

　　“我有个想法，这个网站可以支持听力障碍的人群。”小明灵机一动。

　　“你是指听音乐的网站，对听觉障碍者做可访问性支持？”我怀疑自己听错了。

　　“是音画网站！用户可以观看画面。”

　　“......”

　　“特性不是越多越好，现在让我们回到起点。”

　　“你希望打开一个网页，自动播放喜欢的音乐？”我提问。

　　“似乎只能手动播放。”看起来小明并不介意这一点。

　　“炫酷的视觉效果？”

　　“基本满意。”

　　“那么，还有其他问题吗？”

　　...

　　“我的手机里也没有 MP3 文件！”

附录

　　在线演示：Audio Visualizer

　　Github 开源：general-engine