随手画几笔就能变成音乐？我用NAS部署了能画画的浏览器乐器

不知道大家小时候有没有干过这种事：看到一张画，会下意识觉得某个颜色应该是“响”的，尖锐的三角形像高音，圆滚滚的图案则应该软一点、低一点。

这种感觉其实有个挺文艺的名字——通感。

于是熊猫前段时间突然冒出来一个想法：如果真的把画画和音乐绑在一起会怎么样？ 不需要学五线谱，不需要先研究和弦，也不用面对Ableton、FL Studio那一堆旋钮，只要在画布上随手画几个图形，程序自己把它们翻译成音乐。

恰好，前段时间发现一个项目项目：Synesthesia Canvas，中文名叫“通感画布”。项目原地址：hg13128816002-art/Synesthesia-Canvas。

这东西到底怎么玩？

第一次打开通感画布，其实不用研究教程。

通感画布

中间就是一块画布，左边选择一种声音，然后拿鼠标往里面画。画几个图形以后按下空格键，播放头从左往右扫过去，碰到这些图形时就会自动发出声音。

通感音符

而且它并不是简单做成“画一个圈播放一个固定音效”。

画布里的不同属性都安排了对应的音乐参数，图形越靠左，声音越早出现；越靠右，声音越晚出现；上下位置决定音高；横向宽度决定这个音要持续多久；图形大小会影响力度，就连左右位置也会参与立体声声像。

所以你最后听到的，其实就是这张“画”本身。

旋律

同样几个图形，往上拖一点，旋律会变；把其中一个拉长，它就从短促的一声变成长音；位置左右挪动，节奏也跟着改变。项目默认还会把音高吸附到音阶上，所以即便完全不懂乐理，随便乱画通常也不会离谱到像猫踩钢琴。项目默认采用E暗色五声音阶、132 BPM、1/16量化和Swing，并加入延迟、压缩、ducking等处理。

image.png

目前版本已经做了13种声音，除了明亮铜管、泡泡风琴、玻璃琴键、流光弦乐、电光贝斯这些旋律音色，还有活力鼓组、深层重鼓、像素鼓机、故障切片鼓和霓虹派对鼓。不同声音在画布上也用了不同形状和视觉语言，所以有时候甚至不用播放，看画面大概就能猜到哪一块负责旋律、哪一块负责打鼓。

调式也不是只有默认的一套，目前里面已经塞了暗色五声、开放五声、自然大调、自然小调、多利亚、利底亚、全音音阶等十多种选择。除此之外还做了Four-on-the-floor、2-Step等节奏模板，可以先铺一个底鼓节奏，再往上画旋律，对于熊猫这种乐理水平基本停留在“这段听起来还挺带感”的人来说友好很多。

音频导出

做完以后还可以直接导出WAV，项目会在浏览器中生成44.1kHz立体声PCM音频。换句话说，你随手画出来的一段东西，最后是真的可以变成一个音频文件拿走，而不是只能在网页里听个响。

NAS部署

项目原本是没有Docker镜像，不过这么有意思的项目，熊猫自然是想分享给大家，所以构建了双结构的Docker镜像。

目前已经做好了公开镜像，同时支持AMD64和ARM64，所以大部分x86 NAS和ARM NAS都能直接跑。

最简单直接一条命令：

docker run -d --name synesthesia-canvas -p 3000:3000 --restart unless-stopped ghcr.io/panda-995/synesthesia-canvas:latest

这里熊猫用的极空间部署，打开极空间的Docker，直接使用项目自带的Compose：

services: synesthesia-canvas: image: ghcr.io/panda-995/synesthesia-canvas:latest pull_policy: always restart: unless-stopped init: true environment: NODE_ENV: production HOST: 0.0.0.0 PORT: 3000 ports: - "3000:3000"项目部署

启动之后浏览器访问，或者直接用极空间自带的远程访问也行