爱你的声音看起来像什么-音频手绘可视化

930 阅读2分钟
原文链接: zhuanlan.zhihu.com

音频可视化并不是一个新课题,但是搭配上手绘画风,和你的心意,在这个特殊的日子里,还是能给你心爱的 TA 带来小小的惊喜吧!

今夜月色真美 - 音频手绘可视化

GitHub 传送门:Ovilia/moonight

开发小记

这个项目最初的想法来自于卖声音挂画的淘宝商品,大致就是你录一句话给卖家,卖家手动帮你生成这样一幅画,并且连同画框卖给你(利益无关,不打广告)。

然后我在初期的设计是想做成一个 App 的,用最新刚上的 ionic 4 快速实现了初期的设计——

其中画面上的几个曲线片按照设计还会根据手机角度产生一定的视差效果,不过当时还没实现就意识到,从想出 idea 到七夕这个热点只有一周不到的时间,所以折腾了一阵之后决定还是用网页版做个快速原型。而对于这个设计我也有点隐隐的不太满意。

这时候,我想到以前看到过的一个手绘风的 Canvas/SVG 库:Rough.js

实际使用的感受是,这个库虽然很酷吧,但是接口设计上还是有挺多不足的。比如 Canvas 和 SVG 渲染的接口略有不同,导致我在做技术选型切换的时候折腾了一阵。要是能像 ECharts 这样只在初始化的时候传入一个配置项,其他接口完全相同,就很棒了!

还有就是接口设计还是比较底层的,需要自己写不少绘图方面的指令,或是有些功能没支持,还是需要自己通过原始 Canvas/SVG 操作实现。比如我理解的,作为一个图形库,支持旋转缩放之类应该是必然的,然而我用这个库还得自己先把 context.transform 了,感觉有点不友好,因为理论上我不应该操作 context 了,完全交给图形库托管了。还好平时工作就是这方面相关的,这方面的问题没耽误进度。

碰到最大的坑就是录音、Web Audio 等设备相关的接口的兼容性问题,虽然做了 polyfill,有些手机上还是既不报错也没效果。甚至录音也成功录下来了,还有数据,只是数据看起来就不对,少了几个数量级。至今也没很好解决……

不管怎么说,如果幸运的话,还是可以玩一玩的——

Moonight 今夜月色真美