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

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

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

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

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

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

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

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

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

摄像头
  → 手部关键点识别
  → 提取手掌位置、距离和手势
  → 平滑、死区和状态保持
  → 映射成音阶、和弦、音量和音色
  → Web Audio 实时合成声音

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。