Ceramic Beats

大都会博物馆通过开放获取计划 The Met Open Access，把四万多件陶瓷藏品的照片和数据公开给所有人使用。这个站从中借用了一个现成的结构，博物馆自己的目录是按材质分类的。目录里 terracotta（赤陶）下面有 16,651 件，porcelain（瓷）8,550 件，一直排到 fritware（熔块胎，一种掺了玻璃料烧成的陶瓷胎体）1,248 件。九种材质就是九条音轨，每一行左边写着材质名和件数，鼓机的一行就是目录的一行。

这台鼓机的声音也来自九种材质，每种材质各配一个敲击声。这些声音不是录下来的，而是用 AI 音频公司 ElevenLabs 的音效生成接口，按一段文字描述生成的。描述里写着用什么东西敲一件什么器物，声音响多久。这九种敲击声之间的差别，靠的是烧成温度的高低。没烧过的陶土敲下去没有一点余音，赤陶罐子闷响一下，而瓷、彩陶和熔块胎烧到了玻璃化，也就是胎体已经部分熔成玻璃质，敲起来像玻璃一样有余音。站上还有一张单独的工作表，把九段描述全部摊开，并列出每段向接口买了两秒音频、最后留下多长，以及在浏览器里把音量压低了几分贝，连失败的尝试也写在上面。石器那一条最后描述的是敲一块花岗岩，因为照着陶罐写的描述，生成出来的全是两秒糊成一片的空响。

整个鼓机是一块九行十六列的格子板，144 个格子每个对应一件实物。每种材质准备了 32 件藏品，一行一次显示其中连续的 16 件。这 32 件事先按釉色和色相排好了顺序，所以一行从左到右看，是这种材质从浅到深的颜色。访客按下 Reshuffle 按钮后，每一行都换到这 32 件里的另一段，板子上的东西全部换掉。光标停在格子上时会浮出一张小卡，写着藏品名、年代和产地。访客按住 Alt 键点一下格子，就会在新标签页里打开这件藏品在大都会官网上的页面。

访客进站时，板子上默认放着一段叫 Kiln Floor 的节奏，说明写着 four on the floor, in fired clay，速度是每分钟 118 拍。four on the floor 是舞曲里每一拍都敲一下底鼓的节奏型。除了 Kiln Floor，另外四个预设节奏也各配了一句说明。Amphora 是希腊和罗马风格的三三二切分，也就是把一组八个音按三、三、二分组来加重音。Potter's Wheel 是连续不断的十六分音符，Glaze Drift 稀疏而慢，几乎只用瓷。Frit & Faience 用的是伊斯兰展厅里那些颜色明亮的胎体。访客改动任何一格，节奏名后面就会自动加上 variation 一词，节奏名本身也可以直接点进去改写。访客按下 Save Beat 后，这个站会把整块板子的状态编成三十个字节写进网址。生成的链接本身就是这段节奏，不需要账号，也不经过服务器。

Zui Chen 把整个站画成了工作室里的一张记录纸。底色是米色纸 rgb(228, 226, 219)，文字用墨色 rgb(43, 42, 38)。页面上的强调色只有两个，分别是陶土红和蜡笔黄。陶土红 rgb(201, 88, 58) 用在播放键、标示播放位置的红点和 CERAMIC BEATS 那行字上，蜡笔黄 rgb(183, 154, 70) 用在标题下的一道划线和状态条上的一抹荧光笔上。每种材质还有一个自己的标记色，赤陶是 rgb(188, 106, 72)，彩陶是 rgb(42, 157, 163)，熔块胎是 rgb(74, 94, 168)。这些颜色只出现在每行开头的圆点和格子被敲响时的描边上。

这个站的字体有三款，分工像一张手填的表格。Caveat 是一款手写体，用来写材质名、节奏名和所有注释，节奏名是 38 像素，套在一个手画的椭圆里，其余是 15 到 18 像素。IBM Plex Mono 是一款每个字符一样宽的等宽字体，用来写件数、状态条、按钮和页脚的说明，一律是 8 到 11 像素的全大写，像打字机打上去的编号。Libre Baskerville 是衬线体，只出现在说明面板和那张工作表的正文里。整块板子上一共不到五百个字符，其中三百多个是 8 像素的等宽小字。

板子上的格子才是这张记录纸上的主角。144 个方格边长都是 59 像素，每一格四个角的圆角半径都不一样，并且按自己所在的位置固定歪一个不超过 2.8 度的小角度，像一张张剪下来贴上去的纸片。空格子是白色的，里面描一圈 1 像素的白线，外面有两层投影。格子四个一组，每隔一组叠上一层 6.7% 的墨色，所以访客不用看上方的数字，也数得出一小节里的四拍。放了藏品的格子贴着这件藏品裁成方块的照片，圆角和倾斜照旧保留。

板子上方一排十六个小点是走带，用来标示播放走到了哪一步，第 1、2、3、4 拍用手写数字标出来。左上角的播放键是一个墨色的圆，画得不太正，旁边是停止键、调速度的 Tempo 滑块和带垃圾桶图标的清空键 Clear。右上角有三个按钮，Reshuffle 和 Presets 是只描边的药丸形，Save Beat 是实心的墨色。药丸按钮的四个圆角同样各不相同。左下角一条纸带上写着 AUDIO ENGINE READY | 4/4 TIME | 21 TILES SET，开头一个红点，上面划了一笔黄色荧光笔。页脚正中是一行 - Ceramic_Beats -，下面用红色等宽字写着 CERAMIC BEATS samples show true sound only，再用手写体接一句 natural variations may occur between reshuffles，整段像商品包装背面的标签。

这个站弹出的小卡和面板用的也是这种纸。光标停在格子上时浮出的小卡是一张浅色卡片，第一行用手写体写藏品名，第二行用衬线体写年代和产地，第三行用等宽小字写材质，以及按住 Alt 点击的提示。访客点右下角的 About this project 后，一张斜着 0.6 度的说明纸会从角落滑进来。这张说明纸的正文是衬线体，末尾有一行手写的 How each sample is generated，后面带一个箭头。访客再点这一行，一张 1157 乘 887 像素的大工作表就会盖住整块板子。这张工作表的标题 Nine bodies, nine strikes 套在一个椭圆里。标题下面是一条从 dead（发闷）到 rings like glass（像玻璃一样响）的刻度线，九种材质的彩色圆点按烧成温度排在线上。再往下是九行声音描述，每行右侧有一条颜色条，标着买了 2.0 秒、留了 0.30 秒。最底下是一张流程图，从提示词到生成音效，再到裁切，最后放进格子。

Ceramic Beats 里的图片只有一种，就是藏品照片裁成方块的局部，没有调色。整块板子看起来像一盒按颜色排好的釉片样品，每一片都能追溯到博物馆里的一件实物。

这个站不用滚动，所有东西一屏放下，也不换页。页面上会动的东西只有三样，走带、被敲响的格子，以及纸片的弹出和收起。

访客按下播放后，走带上当前那个点会变成陶土红，放大到 1.3 倍。同一列的九个格子亮起一圈描边，其中放了藏品的格子放大到 1.08 倍，投影加深，像刚被敲了一下。画面刷新的时机由音频的时钟决定。浏览器处理声音的线程会提前把每一下敲击排好，格子要等到那一拍真正响起的那一帧才亮，所以画面和声音对得上。访客停止播放时，最后一列的高亮会晚 80 毫秒才清掉，免得和一次已经排好的刷新撞在一起。

访客在鼓机没在播放的时候点一个格子，藏品贴上去的同时会响一声，好让访客先试听。访客按住鼠标横着拖，划过的格子都会照第一格的结果统一填上或清掉，这样一下就能画满或擦掉一整行。访客按 Reshuffle 时，右下角会弹出一张斜着 0.8 度的小纸条，写着 Drew a new set of objects。Presets 按钮点开后是一张下拉的纸片，列着五个预设，每个的名字用手写体，说明用等宽的大写字母。访客按键盘上的空格键，也能让鼓机播放和暂停。

这九个敲击声每一次响起的时候，听起来都不一样。每一下的音量在 0.55 到 1 之间随机取值，音高也在这种材质允许的幅度内随机漂移。瓷最稳，只漂 1.5%，没烧过的陶土最松，能漂 7%。所以即使十六分音符连着敲两小节，访客也听不出是同一段声音文件（采样）在重复。每种材质的音量还预先压低了一档，熔块胎压低 5 分贝，陶土不压。九种声音在生成时响度被拉得差不多，预先压低音量就是为了把原本的轻重差别补回来一点。

这个站没有用前端框架，也没有用打包工具把代码合并压缩。七个手写的脚本文件一共 34 KB，没有压缩，每个文件开头都有一段注释，解释这个文件为什么这么写。唯一用到的库是网页音频库 Tone.js，它在浏览器自带的 Web Audio 接口上提供了节拍时钟、音序和播放采样这些现成的工具，源码 284 KB，压缩后传输 57 KB。页面上没有用一个 canvas 画布，格子全是普通的按钮，图片全是按钮的 CSS 背景图。

144 个格子共用一张图片，所有藏品的局部都裁下来拼进了一张 746 KB 的 WebP 大图，排成 16 列 18 行，一共 288 张小图，每种材质 32 张。这种把许多小图拼成一张的做法叫图集，浏览器只需要下载一次。每个格子用百分比写的 background-position 从大图里对准自己那一块，所以格子的尺寸改成多少都能对准。藏品的编号、名字、年代、产地和平均色装在一个 10 KB 的 JSON 数据文件里。九个敲击声是九个 wav 音频文件，每个 26 到 95 KB，一共 403 KB，页面打开时一次下载完。访客第一次打开页面，一共要下载 1.34 MB，共 29 个请求，其中字体从 Google Fonts 加载，102 KB。

每敲一下，程序都会新建一个播放声音的节点（BufferSource）和一个控制音量的节点（Gain），响完就销毁。这样做是因为十六分音符连着敲时，后一下会压在前一下的尾音上，如果共用一个播放器，前一下的尾音会被切掉。走带是挂在 Tone.js 的全局时钟 Tone.Transport 上的一个十六步音序（Sequence），画面刷新通过 Tone.Draw 排到对应的发声时刻。浏览器规定网页要等用户操作过一次才能发声，所以访客第一次在页面上按下鼠标时，不管按在哪里，页面就解锁音频，访客第一次点格子就能听到声音。

这个站保存节奏时不经过任何服务器，而是把板子的状态压进 30 个字节。第一个字节存速度减去 60 的值，接下来九个字节存每一行图片的偏移，也就是这一行显示的是 32 件里的哪一段。然后 18 个字节用一个比特代表一个格子，存下 144 个格子是否放了藏品，最后两个字节是静音掩码，按位记录哪几行被静音。这 30 个字节转成能安全放进网址的 base64 文本，写进网址 # 号后面的部分（hash），后面再跟上节奏名，同时复制到剪贴板。别人打开这个链接，板子、速度、静音设置和每一格的图片都会原样恢复。

加载这个页面时，服务器要 109 到 179 毫秒才返回第一个字节，屏幕上第一次画出内容（FCP）在 632 到 916 毫秒。页面上最大的那块内容（LCP）是左上角那行手写的节奏名，和第一次画出内容同时出现，远在 Google 建议的 2.5 秒之内。加载中东西跳位置的程度（CLS）是 0.09，刚好在 Google 建议的 0.1 上限以内，原因是板子要等 JSON 数据到了才生成，生成时把页脚往下推了一次。加载期间只有一个长任务，也就是一段让浏览器连续忙着、暂时顾不上响应点击的脚本，长 66 到 178 毫秒。鼓机播放的时候，画面始终保持每秒 60 帧。

这个站照顾读屏软件和键盘用户的工作只做了一半。在做到的那一半里，页面声明了语言是英文，页头 header、主体 main、页脚 footer 三个地标区域都标了，读屏用户可以直接跳到任何一块。播放、停止、清空、洗牌、预设、保存和九个静音按钮都有读屏软件念得出的名字，节奏名也是一个可以编辑的标题。访客用键盘切到按钮上时，按钮周围会出现一圈 1 像素的陶土红焦点框。访客在系统里打开减少动态效果的设置后，格子的过渡动画和面板的滑入全部关掉。这个站没有照顾到的，是板子上那 144 个格子。它们是按钮，却没有名字，也没有标明自己是否被按下，读屏软件念出来的是 144 个一模一样的按钮，而这台鼓机的全部内容就在这些格子里。

Ceramic Beats 在 FWA 拿到 82 分，奖项页上的 DAYS 一栏是 6。

Zui Chen 一个人做了这个站，这是她的第一个 FWA。她在个人简介里写自己是一个会写代码的产品设计师，做了五年的消费类应用和智能代理界面，也就是让 AI 替用户去办事的那类产品。她还做一些乐器，能演奏一幅画、天气或一只烧好的罐子。她本科在密歇根大学读统计，硕士在设计学院 Parsons 读数据可视化。Ceramic Beats 这个站，就是她说的那只能演奏的罐子。