keydown（）とWeb Audio APIでトリガーされるイベントが多すぎます

Question

シンセサイザーを作っていますが、これを達成しようとしているのは、オシレーターが一度作成され、

以下は私のコードです。ここで

$(document).on("keydown", e => { 
 
    console.log(e); 
 
    let key = $("div[data-key-id = " + e.keyCode + "]") 
 
    key.addClass('red') 
 
    if (fired) return null; 
 
     fired = true; 
 
     let oscs = playTone($(key[0]).attr("data-frequency")) 
 
     if (!oscs) return null; 
 
     $(document).on('keyup', e => { 
 
      oscs.forEach(osc => { 
 
      osc.stop(); 
 
      }); 
 
     $('.key').removeClass('red') 
 
     fired = false; 
 
     }) 
 
    })

と呼ばれているPlayTone機能です。

function playTone(freq) { 
 
    if (!freq) return null; 
 
    let osc = audioCtx.createOscillator(); 
 
    let osc2 = audioCtx.createOscillator(); 
 
    connectNodes(osc, osc2) 
 
    osc.type = type; 
 
    osc2.type = type2; 
 
    osc.detune.value = detune * 5; 
 
    osc2.detune.value = -detune * 5; 
 
    let number = parseFloat(freq.match(/[\d\.]+/)) 
 
    osc.frequency.value = number * octave; 
 
    osc2.frequency.value = number * octave; 
 
    console.log(osc) 
 
    osc.start(); 
 
    console.log(osc2) 
 
    osc2.start(); 
 
    return [osc,osc2] 
 
}

何が起こっているのKeyDownに、イベントは、このplayToneを呼び出して複数回、複数回トリガされていることです。作成されているオシレータの量がCPUに負担をかけ、オーディオを歪ませます。私はイベントが一度だけ解雇されていることを確認する方法が必要です。私は解雇された変数を使ってこれを達成しようとしていましたが、私は必要な結果を達成していません。

Answer 1

はあなたがイベントに一度だけ結合していることを確認してみてください。

$(document).unbind('keydown.namespace').bind('keydown.namespace', e => { 
 
    console.log(e); 
 
    let key = $("div[data-key-id = " + e.keyCode + "]") 
 
    key.addClass('red') 
 
    if (fired) return null; 
 
     fired = true; 
 
     let oscs = playTone($(key[0]).attr("data-frequency")) 
 
     if (!oscs) return null; 
 
     $(document).unbind('keyup.namespace').bind('keyup.namespace', e => { 
 
      oscs.forEach(osc => { 
 
      osc.stop(); 
 
      }); 
 
     $('.key').removeClass('red') 
 
     fired = false; 
 
     }) 
 
    })