我把摄像头变成了乐器：从手势识别到 Web Audio，分享 5 个真正踩过的坑

最近做了一个有点不一样的浏览器小项目：用摄像头识别双手动作，再把手的位置和姿势映射成和弦、音高、音量和音色。

不需要安装软件，也不需要麦克风。打开网页、允许摄像头后，就可以隔空演奏。

项目地址：GestureSynth.me

建议使用最新版 Chrome 或 Edge 。摄像头画面只在本地处理，不会上传。

真正难的不是“识别到手”

最开始我以为，只要 MediaPipe 能返回手部关键点，剩下的事情就是把坐标转换成音符。

实际做下来发现：识别出一只手很容易，让它变成一个“能演奏”的控制器才难。

摄像头每一帧都会返回一组手部关键点，但这些坐标会轻微抖动，偶尔还会丢失。如果直接把原始坐标连接到音高或者音量，听起来会非常不稳定。

最后形成的处理链路大致是：

摄像头

  → 手部关键点识别

  → 提取手掌位置、距离和手势

  → 平滑、死区和状态保持

  → 映射成音阶、和弦、音量和音色

  → Web Audio 实时合成声音