Web应用实例:音频可视化
准备
语言:TypeScript
小明告诉我,他希望打开一个网页,立即听到他喜欢的音乐,如果有视觉特效就更棒了。
第一节 本地音频
“可是我的电脑里没有 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