2

ここで少し問題があります。私がしようとしているのは、その値を表示し、その値をオシレーターの周波数とデチューンに設定する jQuery スライダーです。問題は、スライダーが正常に機能していることですが、Web オーディオのコメントを外したり、change:イベントをスライダーに追加したりするとすぐに、それらが消えてしまうことです。

作業コードは次のとおりです。

$(document).ready(function(){
$(function() {
    $("#osc1_pitch").slider({
        min: 0,
        max: 25000,
        value: 440,
        step: 2,
        slide: function(event, ui) {
            $("#cur_pitch").val(ui.value);
        }
    });
    $("#cur_pitch").val($("#osc1_pitch").slider("value"));
});
$(function() {
    $("#osc1_detune").slider({
        min: -4800,
        max: 4800,
        value: 0,
        step: 2,
        slide: function(event, ui) {
            $("#cur_detune").val(ui.value);
        }
    });
    $("#cur_detune").val($("#osc1_detune").slider("value"));
});
});

しかし、これをslide:イベントの下に追加すると、それらは消えます

change: function(event, ui){
    osc.frequency.value = $("#cur_pitch").val();
}

Web Audio コードのコメントを外すと、同じことが起こります。

var pitch = document.getElementById('cur_pitch').value;
var detune = document.getElementById('cur_detune').value;
var ctx = new webkitAudioContext(); 
function osc1(){ 
osc = ctx.createOscillator(), 
osc.type = 0; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
osc.frequency.value = pitch;
osc.detune.value = detune;
gainNode = ctx.createGainNode(); 
osc.connect(gainNode); 
gainNode.connect(ctx.destination);
gainNode.gain.value = 1; 
osc.noteOn(0); 
};

問題のコードがコメントアウトされたフィドルの作業コードは次のとおりです。http://jsfiddle.net/ryanhagz/ruXd7/1/

私はどこでも適切な答えを探しました.UI要素をWebオーディオに接続する方法はたくさんありますが、私が見たすべてがうまくいかないようです. それもまた実にシンプルなものだなと感じます。いつものように、どんな助けも大歓迎です!

編集：slidechange:イベントを追加し、ピッチと周波数の初期値をスライダーの値に設定しましたが、うまく機能しているように見えますが、スライダーはまだピッチやデチューンに影響を与えていません.

新しいコード:

var ctx = new webkitAudioContext(); 
function osc1(){ 
osc = ctx.createOscillator(), 
osc.type = 0; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
osc.frequency.value;
osc.detune.value;
gainNode = ctx.createGainNode(); 
osc.connect(gainNode); 
gainNode.connect(ctx.destination);
gainNode.gain.value = 1; 
osc.noteOn(0); 
};
$(document).ready(function(){
$(function() {
    $("#osc1_pitch").slider({
        min: 0,
        max: 25000,
        value: 440,
        step: 1,
        slide: function(event, ui) {
            $("#cur_pitch").val(ui.value);
        }
    });
    $("#cur_pitch").val($("#osc1_pitch").slider("value"));
    $("#cur_pitch").on("slidechange", function(event, ui) {
        osc.detune.value = $("#cur_pitch").val();
    });
});
$(function() {
    $("#osc1_detune").slider({
        min: -4800,
        max: 4800,
        value: 0,
        step: 1,
        slide: function(event, ui) {
            $("#cur_detune").val(ui.value);
        }
    });
    $("#cur_detune").val($("#osc1_detune").slider("value"));
    $("#cur_detune").on("slidechange", function(event, ui) {
        osc.detune.value = $("#cur_detune").val();
    });
});

});
4

1 に答える 1

1

問題のコードを含める場合は,、スライド イベントの後に を追加する必要があります。 

slide: function(event, ui) {
            $("#cur_pitch").val(ui.value);
        },

と

slide: function(event, ui) {
            $("#cur_detune").val(ui.value);
        },

http://jsfiddle.net/ruXd7/3/

于 2013-10-30T02:01:12.983 に答える