2013-01-14 79 views
0

的問題是這樣的: 在下面的例子中,http://jsfiddle.net/GmgGY/2/動態創建了一系列與KEYUP玩振盪器/下

當你點擊橙色按鈕創建一個新的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(); 

}; 


}()); 

}); 

回答

1

你的問題其實是,你從來沒有明確宣佈和範圍「振盪器」 - 所以這將成爲全局。嘗試把「這個」。在每個「振盪器」出現的前面,它將起作用。

這不是理想的代碼,但是,因爲您要附加每個合成器整個身體多餘的事件處理程序 - 你的代碼

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

是創建一個完整而獨立的函數調用和對身體呼叫attachEventHandler引擎蓋下,綁定到新版本的「合成器」;跟蹤合成器列表(甚至從body.getElementsBySelector()中獲取它們)並在每​​個合成器上調用noteOn/Off可能會更好。儘管如此。

+0

您的評論的第二部分是我將在瞭解如何做完全的工作,但感謝把它扔在那裏。我離開了「注意/關閉的想法注意事項被打破或不按預期工作,因此oscillator.disconnect – William