用鼠标点按屏幕上的虚拟琴键或吉他弦，永远无法带来演奏真实乐器时的细腻触感。真实乐器的灵魂在于微动态：贝斯手手指压在品丝上的微弱颤动（Vibrato 揉弦）能带来充满生命力的音调起伏；在琴弦特定节点的轻触虚按，能激发出清澈空灵的自然泛音（Natural Harmonics）。
在接入 Claude Fable 5 的视觉多模态与空间手势接口后，我们得以摆脱物理外设，纯靠前置摄像头构建一个三维悬停感知的隔空琴弦演奏界面。
然而，隔空乐器最核心的技术难关在于物理映射的置信度：如何从视网膜单目视频中解算指尖相对琴弦平面的深度（Z 轴距离）？如何区分“实按发音”、“悬停触弦激发泛音”与“离弦静音”？又如何将手指微米级的横向生理抖动，提炼为 4~7Hz 均匀呼吸的专业级揉弦颤音？
这需要一套横跨空间几何学与 Web Audio 物理声学建模的端侧处理管线。
琴弦多模态交互的三维空间建模
我们将屏幕上的 2D 琴弦赋予物理声学厚度与虚拟三维感应区：
- X 轴（琴弦有效振动长度）：指尖在琴弦上的横向投影位置，决定音高品位（Fret Position）。在特定物理分水岭（弦长的 1/2 处八度节点、1/3 处十二度节点、1/4 处双八度节点），保留特殊的声学感应窗口。
- Y 轴（弦选择）：决定当前激活的是 1 弦到 6 弦中的哪一根。
- Z 轴（悬停深度 Depth）：指尖到摄像头平面的相对距离。通过食指指尖关节点与近端指间关节的几何透视畸变比率，解算出归一化的触弦深度 $Z \in [-1, 1]$：
- $Z > 0.3$：悬空未触弦态（Hovering）；
- $0.05 \le Z \le 0.3$：轻触节点虚按态（Flageolet / Harmonic Touch），若 X 轴正好位于泛音节点，激发纯净自然泛音；
- $Z < 0.05$：实按品丝态（Fretted），激发出坚实的基频声，并监听横向微颤。
手指横向抖动与揉弦（Vibrato）带通滤波
很多初学者手势算法直接把手指坐标的差分直接加到振荡器频率上，结果声音变得像警报器一样滑稽刺耳。
真实吉他乐手的揉弦（Vibrato）是一种具有明确生理频率特征的简谐运动：频率通常集中在4.5Hz 到 6.5Hz之间，过低显得拖沓，过高则成了帕金森式痉挛；颤音深度（Pitch Depth）通常控制在 15~40 音分（Cents）以内。
我们利用一个滑动时序窗口提取指尖在 X 轴上的瞬时摆动速度，并通过一个简易的数字带通滤波器（Bandpass Filter）分离出 4~7Hz 的纯净揉弦分量：
export interface GestureFingertip { x: number; // 琴弦方向相对坐标 0.0 ~ 1.0 y: number; // 垂直弦线坐标 z: number; // 空间深度: >0.3 悬空, 0.05~0.3 轻触, <0.05 实按 timestamp: number; } export class VibratoDetector { private history: Array<{ x: number; t: number }> = []; private readonly windowMs = 500; // 500ms 滑动分析窗 /** * 输入指尖时序数据，解算揉弦的调制频率(Hz)与调制深度(0~1) */ public analyze(current: { x: number; t: number }): { frequency: number; depth: number } { this.history.push(current); // 清理过期数据 const threshold = current.t - this.windowMs; this.history = this.history.filter((pt) => pt.t >= threshold); if (this.history.length < 10) { return { frequency: 0, depth: 0 }; } // 计算均值基线 const avgX = this.history.reduce((sum, pt) => sum + pt.x, 0) / this.history.length; // 统计过零点（Zero-Crossing）以计算主导频率 let zeroCrossings = 0; let maxAmp = 0; for (let i = 1; i < this.history.length; i++) { const prevDev = this.history[i - 1].x - avgX; const currDev = this.history[i].x - avgX; maxAmp = Math.max(maxAmp, Math.abs(currDev)); if ((prevDev > 0 && currDev <= 0) || (prevDev < 0 && currDev >= 0)) { zeroCrossings++; } } const timeSpanSec = (this.history[this.history.length - 1].t - this.history[0].t) / 1000; // 过零率周期推算频率 (两个过零点为一个完整周期) const estimatedFreq = timeSpanSec > 0 ? (zeroCrossings / 2) / timeSpanSec : 0; // 真实揉弦的生理特征：必须落在 3.5Hz ~ 7.5Hz 范围内 if (estimatedFreq >= 3.5 && estimatedFreq <= 7.5 && maxAmp > 0.005) { // 归一化深度：最大摆幅 0.04 对应深度 1.0 const normalizedDepth = Math.min(1.0, maxAmp / 0.035); return { frequency: estimatedFreq, depth: normalizedDepth }; } return { frequency: 0, depth: 0 }; } }自然泛音声学物理与 Web Audio 合成器
在声学上，琴弦振动由一系列正弦谐波叠加而成。普通弹奏时基频（Fundamental）能量最强；而在琴弦节点的轻触（虚按），在物理上强行抑制了不能在触碰点形成波节（Node）的振动模式，留存下来的全都是该节点的倍频谐波。
- 1/2 处（12 品）：抑制基波，激发出第 2 谐波（高一个八度，频率 $\times 2$），音色清脆；
- 1/3 处（7 品或 19 品）：激发出第 3 谐波（高一个八度加纯五度，频率 $\times 3$），泛音晶莹剔透；
- 1/4 处（5 品）：激发出第 4 谐波（高双八度，频率 $\times 4$），带有金属钟磬声。
为了在 Web Audio 中逼真再现这一声学特性，我们手写一个带泛音模式与 LFO 揉弦调制的合成器节点：
export class VirtualStringVoice { private audioCtx: AudioContext; private oscNode: OscillatorNode | null = null; private gainNode: GainNode | null = null; private lfoOsc: OscillatorNode | null = null; private lfoGain: GainNode | null = null; constructor(audioCtx: AudioContext) { this.audioCtx = audioCtx; } /** * 触发琴弦发音 * @param baseFreq 基频（如 E2 为 82.4Hz） * @param isHarmonic 是否为自然泛音 * @param harmonicMultiple 泛音倍数 (2, 3, 4) */ public triggerNote(baseFreq: number, isHarmonic: boolean, harmonicMultiple = 2): void { this.stopNote(); const targetFreq = isHarmonic ? baseFreq * harmonicMultiple : baseFreq; // 1. 主振荡器（实按用带微弱锯齿的混合声，泛音用纯净正弦波） this.oscNode = this.audioCtx.createOscillator(); this.oscNode.type = isHarmonic ? 'sine' : 'triangle'; this.oscNode.frequency.setValueAtTime(targetFreq, this.audioCtx.currentTime); // 2. 音量包络设计 this.gainNode = this.audioCtx.createGain(); const now = this.audioCtx.currentTime; if (isHarmonic) { // 泛音：极快起音，长达数秒的如钟声般的晶莹衰减 this.gainNode.gain.setValueAtTime(0.001, now); this.gainNode.gain.exponentialRampToValueAtTime(0.8, now + 0.005); this.gainNode.gain.exponentialRampToValueAtTime(0.0001, now + 3.2); } else { // 实按琴弦：坚实的击弦瞬态 this.gainNode.gain.setValueAtTime(0.001, now); this.gainNode.gain.exponentialRampToValueAtTime(1.0, now + 0.008); this.gainNode.gain.exponentialRampToValueAtTime(0.0001, now + 1.8); } // 3. 动态揉弦 LFO 调制器挂载到基频 this.lfoOsc = this.audioCtx.createOscillator(); this.lfoGain = this.audioCtx.createGain(); this.lfoOsc.frequency.setValueAtTime(5.5, now); // 默认 5.5Hz 揉弦速度 this.lfoGain.gain.setValueAtTime(0, now); // 默认揉弦深度为 0 this.lfoOsc.connect(this.lfoGain); this.lfoGain.connect(this.oscNode.frequency); this.oscNode.connect(this.gainNode); this.gainNode.connect(this.audioCtx.destination); this.oscNode.start(now); this.lfoOsc.start(now); } /** * 实时根据手势分析器注入揉弦参数 */ public updateVibrato(frequency: number, depth: number): void { if (!this.lfoOsc || !this.lfoGain || !this.oscNode) return; const now = this.audioCtx.currentTime; if (frequency > 0 && depth > 0) { this.lfoOsc.frequency.setTargetAtTime(frequency, now, 0.03); // 深度最大映射到 30Hz 的音高偏移范围（约半音的 35%） this.lfoGain.gain.setTargetAtTime(depth * 25.0, now, 0.03); } else { this.lfoGain.gain.setTargetAtTime(0, now, 0.05); } } public stopNote(): void { if (this.oscNode) { try { this.oscNode.stop(); this.lfoOsc?.stop(); } catch (_) {} this.oscNode.disconnect(); this.gainNode?.disconnect(); this.lfoGain?.disconnect(); this.oscNode = null; this.gainNode = null; } } }交互状态机裁决与实装效果
最后，在每一帧手势回调中，通过空间状态机将手势特征无缝流转：
export class StringInteractionBridge { private vibrato = new VibratoDetector(); private voice: VirtualStringVoice; // 物理琴弦泛音节点比例定义 (以全长 1.0 为基准) private readonly harmonicNodes = [ { ratio: 0.5, multiple: 2 }, // 12 品，高八度 { ratio: 0.333, multiple: 3 },// 7 品，十二度 { ratio: 0.25, multiple: 4 }, // 5 品，双八度 ]; constructor(audioCtx: AudioContext) { this.voice = new VirtualStringVoice(audioCtx); } public onFingertipFrame(tip: GestureFingertip): void { // 1. 判断是否悬停在泛音节点附近 (容差 ±0.02) const matchedNode = this.harmonicNodes.find( (node) => Math.abs(tip.x - node.ratio) < 0.02 ); // 2. 深度裁决状态机 if (tip.z >= 0.05 && tip.z <= 0.3) { // 虚按轻触态：若正好在节点上，激发清亮泛音！ if (matchedNode) { this.voice.triggerNote(110.0, true, matchedNode.multiple); // 假设 A 弦 110Hz } } else if (tip.z < 0.05) { // 实按品丝态：正常发声 this.voice.triggerNote(110.0 * Math.pow(2, tip.x), false); // 解算生理揉弦动态并动态调节 LFO const { frequency, depth } = this.vibrato.analyze({ x: tip.x, t: tip.timestamp }); this.voice.updateVibrato(frequency, depth); } else { // 完全悬空离弦：声学自然衰减，不做强制切断 this.voice.updateVibrato(0, 0); } } }把视觉多模态从单纯的“点按手势识别”，提升到对空间深度微力矩与人体微颤动的声学共鸣，网页里的乐器才真正拥有了乐手呼吸的质感。隔空挑响琴弦时泛音在耳机里扩散开来的那一秒，科技与声学在此刻同频共振。
