准备
语言: TypeScript https://www.typescriptlang.org/
工具: Visual Studio Code https://code.visualstudio.com/
演示: 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 开源: https://github.com/experdot/general-engine
来源: https://www.cnblogs.com/experdot/p/9846113.html