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

人已赞赏
随笔日记

我们为什么要使用RabbitMQ?

2020-11-9 3:59:08

随笔日记

用SpringCloud进行微服务架构演进

2020-11-9 3:59:10

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索