年薪百万阿里前端工程师分享——Web应用实例：音频可视化
准备
语言：TypeScript
工具：Visual Studio Code
演示：Audio Visualiazer
“小红”（鬼知道她是谁）告诉我，他希望打开一个网页，立即听到他喜欢的音乐，如果有视觉特效就更棒了。
第一节 本地音频
“可是我的电脑里没有 MP3 文件！”
“为什么需要打开一个本地文件？”小明问。
“我不知道你喜欢听什么。”
“...既没有音频资源的版权。”
“...也没有足够的服务器带宽。”
“...更无法向你解释什么是跨域访问限制。”
...
“总之，你只能先去其他网站下载一个 MP3 文件，然后拖进来。”我说。
“那我为什么不直接在其他网站听？？？”他困惑道。
“听起来不错。”
图1-1 启动视图
在这里我还是要推荐下我自己建的web前端开发学习群：853597293，群里都是学web前端开发的，如果你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2019最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。
第二节 频谱变换
通过傅里叶变换将时域数据变换到频域。
“无所谓了，我最希望的是有炫酷的视效。”小红说。
“什么是炫酷？”
“听听你的想法。”小明回答。
“下一代，未来，前所未有的。”
“感觉还行，你会怎么呈现视觉效果呢？”小红接着问。
“*地绘制。”
“什么意思？”
“通俗点讲，想怎么画就怎么画。”
“...我讨厌和程序员沟通！”
图2-1 时域数据
图2-2 频域数据
第三节 历史轨迹
像素保留历史，并向四周弥散。
“这就是你说的下一代？”小红有些失望。
“不是。下一代总是建立在已有的设计上，然后小心翼翼地加入一些变化。”
“哦，那会有什么变化呢？”
“我已经掌握了一种成熟的变化技巧。”
“整体效果像是石头抛入平静的水面，水波逐渐蔓延开来。”
“有没有合适的名字，我可不喜欢《下一代频谱》。”
“当然，‘下一代’只是我们的内部代号，它叫《水波粼粼》。”
图3-1 扩散示例一
图3-2 扩散示例二
图3-3 扩散示例三
第四节 旋转
将旋转矩阵作用于整个画面。
“你刚才提到小心翼翼，有没有大胆的设计呢？”
“有的，我管它们叫‘实验性质的特性’。”
“首先是旋转，让整个画面旋转起来。”
“有的人不喜欢旋转，那会让他感到眩晕。”小明质疑道。
“是的，对用户来说，这就像 EDM 和 轻音乐的区别。”
“还有吗？”
“把任意两个场景混在一起。我有个飞鸟场景，鸟儿随音乐起舞，是不是很棒？”
“我不看好它，这有些难以理解。”
“如果用户不喜欢，你会移掉它们的对吗？”小明接着问。
“很敏锐，实验性质的特性只会有两个结果。”
“...即在未来的版本中得到加强，或者彻底移除。”
图4-1 旋转
图4-2 场景混叠
第五节 移动端适配
限于移动端的硬件水准，对此不要抱有太多幻想。
“移动端是潮流，还有其他特性吗？”
“本地化支持。界面上的文字和使用习惯根据浏览器语言调整。”
“我有个想法，这个网站可以支持听力障碍的人群。”小红灵机一动。
“你是指听音乐的网站，对听觉障碍者做可访问性支持？”我怀疑自己听错了。
“是音画网站！用户可以观看画面。”
“......”
“特性不是越多越好，现在让我们回到起点。”
“你希望打开一个网页，自动播放喜欢的音乐？”我提问。
“似乎只能手动播放。”看起来小明并不介意这一点。
“炫酷的视觉效果？”
“基本满意。”
“那么，还有其他问题吗？”
...
“我的手机里也没有 MP3 文件！”