これがJSfiddleです。http://jsfiddle.net/ZttnJ/5/
問題は、別のスコープにアクセスできるスコープ内の変数が必要なだけですが、変数をより高いスコープに配置すると、要素の動的作成が中断されることです。これは、動的に作成された dom 要素で再発する問題のようですプロトタイプなどでコードをコンストラクターに再作成せずにこれを解決する定型的な方法があるかどうか、私は非常に興味があります。わかりやすくするためにコードにコメントを付けました。コメントは1つだけです。
var SynthCreationModule = (function(){
context = new webkitAudioContext();
var orangeButton;
var applicationArea = document.getElementById("applicationArea"),
orangeButton = document.getElementById("orangeButton"),
counterSynth = 1;
counterSynthMuteButton = 1;
counterSynthParameters = 1;
counterPitchInput = 1;
orangeButton.addEventListener("click",createSynth, false);
function createSynth () {
var pitchInput = document.createElement('input').value; // I need this to be accessible to the function called synth.onmousedown
pitchInput.type = "range";
pitchInput.className = "pitchInputClass";
pitchInput.id = "pitchInput" + (counterPitchInput++);
var synth = document.createElement("div");
synth.className = "synth";
synth.id = "synth" + (counterSynth++);
var synthMute = document.createElement("div");
synthMute.className = "synthMute";
synthMute.id = "synthMute" + (counterSynthMuteButton++);
applicationArea.appendChild(synth);
synth.appendChild(synthMute);
synth.appendChild(pitchInput);
$(synth).draggable({ snap: true });
$(synth).draggable({ grid: [ 20,20 ]});
synth.onmousedown= function () {
oscillator = context.createOscillator(),
oscillator.type = 2;
oscillator.frequency.value = pitchInput;
oscillator.connect(context.destination);
oscillator.noteOn(0);
};
synth.onmouseup = function () {
oscillator.disconnect();
};