0

問題はこれです: 次の例では、http://jsfiddle.net/GmgGY/2/

オレンジ色のボタンをクリックすると、新しい div が作成されます。この div をクリックすると、オシレータが再生されます。キーボードのキーを押す (keydown) と、それも再生されます。その後、キーボードの文字が持ち上げられる (キーアップ) と、再生が停止します。これは良いことであり、私が望むものです。

ただし、オレンジ色のボタンを複数回クリックして、複数のシンセを作成すると。キーボードのキーを押すと、すべてのキーが再生されますが (これは私が望んでいることです)、最後に作成されたものだけが keyup イベントに応答するようです。 .

これを修正する方法がわかりません。

動的に作成された各 div には一意の ID がありますが、それらすべてに共通のクラスもあります。クラス（synth.class）を選択し、キーアップでユニバーサルoscillator.disconnect（）を起動する方法があるのではないかと思いました???

私が考えているもう1つのことは、私の問題には、これを引き起こしている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(); 

};


}());

});
4

1 に答える 1

1

あなたの問題は、実際には「オシレーター」を明示的に宣言してスコープを設定しないことです。したがって、グローバルになります。「これ」を入れてみてください。「オシレーター」が出現するたびに、それは機能します。

ただし、これは理想的なコードではありません。シンセごとに余分なボディ イベント ハンドラー全体をアタッチしているためです。

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

まったく別の関数呼び出しを作成し、新しいバージョンにバインドされた「シンセ」を使用して、ボンネットの下の本体で attachEventHandler を呼び出しています。シンセのリストを追跡し (body.getElementsBySelector() から取得しても)、それぞれで noteOn/Off を呼び出す方がよい場合があります。ただし、あなた次第です。

于 2013-01-14T21:47:26.667 に答える