动态创建了一系列与KEYUP玩振荡器/下

Question

的问题是这样的： 在下面的例子中，http://jsfiddle.net/GmgGY/2/

当你点击橙色按钮创建一个新的div。当你点击这个div时，它会播放一个振荡器。如果你按下键盘上的按键（keydown），它也会播放它。当键盘字符被抬起时（键盘），它停止播放。这是好的，我想要的。

但是，当您点击橙色按钮多次，创建多个合成器。当你按下键盘上的一个按键时，所有的按键都会播放（这是我想要的），但是只有最后创建的按键才能响应按键事件。我希望所有按键响应按键事件。不仅仅是最后一个。

我不知道如何解决这个问题。

每个动态创建div有一个唯一的ID，但也是一类是通用于所有的人。我认为可能有一种方法来选择类（synth.class），并在keyup上启动universal oscillator.disconnect（）。

我想另一件事是我的问题，可能需要某种形式的迭代线程补偿任何DOM问题导致了此（假设它不只是专门编程迄今）。但我不确定。

Javascript代码如下。我尽量保持尽可能最小，但我无法弄清楚如何使它比这更小，并且仍然清楚。我省略了html和css元素，但将它们保留在JSfiddle示例中。

$(function(){ 

var SynthCreationModule = (function(){ 
context = new webkitAudioContext(); 
var orangeButton; 
var applicationArea = document.getElementById("applicationArea"), 
orangeButton = document.getElementById("orangeButton"),   
counterSynth = 1; 
counterPitchInput = 1; 
orangeButton.addEventListener("click",createSynth, false); 



function createSynth() { 
    var synth = document.createElement("div"); 
    synth.className = "synth";       
    synth.id = "synthid" + (counterSynth++); 
    applicationArea.appendChild(synth); 
    var pitchInput = document.createElement('input'); 
    pitchInput.type = "range"; 
    pitchInput.className = "pitchInputClass"; 
    pitchInput.id = "pitchInput" + (counterPitchInput++); 
    pitchInput.min = "0"; 
    pitchInput.max="2000"; 
    synth.appendChild(pitchInput); 



synth.onmousedown= function() { 
    oscillator = context.createOscillator(), 
    oscillator.type = 2; 
    oscillator.frequency.value = pitchInput.value;     
    oscillator.connect(context.destination); 
    oscillator.noteOn(0); 


}; 



synth.onmouseup = function() { 
oscillator.disconnect(); 

}; 


// Keydown & keyup events to launch oscillator. (These don't work properly if you create two or more synths. Playing a key down works, but keyup only works on the last created synth. The previous created synths will continue to create additional oscillators but the keydown will not work to stop them. 

var keydown = false; 

$('body').keydown(function() { 
    if(!keydown){ 
     synth.onmousedown(); 
     keydown = true; 
    } 
}); 

$('body').keyup(function() { 
    synth.onmouseup(); 
    keydown = false; 
}); 


$(synth).draggable(); 

}; 


}()); 

}); 

Answer 1

你的问题其实是，你从来没有明确宣布和范围“振荡器” - 所以这将成为全局。尝试把“这个”。在每个“振荡器”出现的前面，它将起作用。

这不是理想的代码，但是，因为您要附加每个合成器整个身体多余的事件处理程序 - 你的代码

$('body').keydown(function() { 
    if(!keydown){ 
     synth.onmousedown(); 
     keydown = true; 
    } 
}); 

是创建一个完整而独立的函数调用和对身体呼叫attachEventHandler引擎盖下，绑定到新版本的“合成器”;跟踪合成器列表（甚至从body.getElementsBySelector（）中获取它们）并在每​​个合成器上调用noteOn/Off可能会更好。尽管如此。