Question

我在这里遇到了一些问题。我想要的是一个jQuery滑块，它显示其值并将该值设置为我的振荡器的频率和失谐。问题是，我让滑块工作得很好，但是一旦我取消注释Web Audio的内容或将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();
}

当我取消注释我的网络音频代码时也一样：

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 Audio连接起来，但我见过的所有内容似乎都不适合我。我觉得这也很简单。一如既往，任何帮助都表示赞赏！

编辑：我添加了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();
    });
});

});

Answer 1

如果要包含问题代码，则需要在幻灯片事件后添加,。

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

和

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

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

带有Web音频节点的Jquery UI滑块

1 个答案: