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; 
 
     }) 
 
    })