对着电脑摄像头挥挥手,连乐器都不用碰,就能弹出电子提琴那种滑来滑去的音色——这是网页作品《Air Theremin》给出的体验。双手张开,音量变大;抬起双手,音高上扬;掌心一合,瞬间安静。手机版本还多一种玩法:把手机像跷跷板一样前后倾斜控制音高,左右倾斜控制音量。
作者署名Pavel Gurov,页面写着"基于theremin.site开发"。看起来只是个周末创意小项目,但页面上并排摆放的GYRO和HANDS两种模式,拆开看会发现它们是两种完全不同的技术,文案把这层差异悄悄抹平了。
GYRO是真传感器,HANDS大概率是摄像头在猜
GYRO模式调的是手机自带的陀螺仪/方向传感器——业内标准做法是浏览器的Device Orientation API,读的是硬件原始数据,精度高、延迟低,前提是必须用手机打开,普通电脑摄像头根本没这块硬件。
HANDS模式听起来像同一套逻辑的延伸,原理却完全不同。它靠摄像头画面找手,大概率用的是Google开源的MediaPipe手部关键点检测——同类项目Thereminal、Gesture Synth的Air Theremin、GitHub上的videotheremin,公开资料描述的都是这条路:摄像头拍画面,模型在画面里定位双手关键点,再把坐标换算成音高音量参数喂给Web Audio API。
一个是硬件读数,一个是视觉估计出来的坐标,精度和延迟根本不是一回事。GYRO和HANDS并排出现,容易让人以为二者是同一种"传感器",这是个容易被忽略的技术混淆点。
隔空乐器不好做,难点都在看不见的地方
就算认清了原理,想把这类项目做流畅也不容易。人耳对音高的感知是对数关系,直接线性映射手部坐标到频率,弹出来的音一半刺耳一半发闷,所以同类项目基本都要做对数映射。摄像头追踪的坐标天然带抖动,不做平滑处理,声音会像齿轮一样咯咯响;音量音高每次变化如果不靠Web Audio的AudioParam做渐变调度,直接跳变会出现刺耳的咔哒声。
架构选择还决定了实际手感。同类项目Thereminal走的是Python后端加WebSocket的路子:摄像头画面传到Python做检测,再通过WebSocket把结果传回浏览器渲染声音。这条链路每一步都要花时间,而隔空乐器对实时性极度敏感,稍有延迟,手感就会发飘。相比之下,如果检测直接跑在浏览器里,延迟能压得更低,但对设备性能要求更高。《Air Theremin》走的是哪条路,页面上完全没说。
作者是谁,页面没交代清楚
《Air Theremin》署名Pavel Gurov,联系方式是一个邮箱。检索没能找到任何公开资料把这个名字和摄像头手势theremin的具体实现方式对应上。倒是查到一个功能描述高度相似的项目Thereminal(又称AR Theremin),作者署名Piere Pavel,同样是摄像头theremin,左手控制音量、右手控制音高,技术栈公开为Python+OpenCV/MediaPipe后端加React前端。
两个名字接近,功能描述接近,但没有证据能证明二者存在直接关联,也可能只是同一条赛道里两个独立创意撞了车。这类不公开代码库的个人网页作品,身份核实本身就是空白——你能玩到的只是一个交互界面,背后是谁写的、代码抄没抄、有没有开源,全靠作者自己一句话交代。
再往上追一层,"基于theremin.site开发"这句话也值得琢磨。theremin.site官方描述里,输入方式只有鼠标和触屏坐标,压根没有摄像头手势追踪的功能。也就是说,如果《Air Theremin》真做出了HANDS模式,这不是简单的二次分发,而是在原项目上叠了一层计算机视觉能力——这层叠加具体怎么实现,原始页面一个字没提。
挥手弹的是琴,没说清的是谁的手在真正操盘代码。
摄像头数据去哪儿了,原文也没说
还有一个原文完全没触及的问题:摄像头拍下的画面在哪里处理?如果检测在浏览器本地完成,视频帧不出设备,隐私风险最低;如果像Thereminal那样传到后端服务器做推理,视频画面就等于被上传过一次,哪怕不存储,过程本身也值得写进说明里。行业里比较认可的做法是尽量把处理压在设备端浏览器内完成,但《Air Theremin》的说明页面对这件事只字未提。
- 提醒.摄像头类网页玩具若未声明本地处理,视频数据流向就是个空白项,想清楚再点"开始"。
Web Audio API和MediaPipe这几年确实把"摄像头当传感器、浏览器当合成器"的门槛压得很低,theremin.site、Gesture Synth、videotheremin这类作品一个接一个冒出来,说明这条路已经跑通,创意变现的成本前所未有地低。但门槛越低,核实成本反而越高——谁做的、代码在哪儿、数据去哪儿,这些问题不会因为体验好玩就自动消失。
古人说"耳听为虚,眼见为实",这次连"眼见"都要打个问号:你看到的手势识别,到底是浏览器里的模型算出来的,还是传到别处算完再传回来的,页面文案不会主动告诉你。