javascript - 带有 Web 音频节点的 Jquery UI slider

Question

我这里有点问题。我想要的是一个 jQuery slider ，它显示它的值并将该值设置为我的振荡器的频率和失谐。问题是，我的 slider 工作得很好，但是只要我取消注释网络音频内容或将 change: 事件添加到我的 slider ，它们就会消失。

这是工作代码:

$(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); 
};

这是注释掉问题代码的 fiddle 中的工作代码:http://jsfiddle.net/ryanhagz/ruXd7/1/

我到处都在寻找正确的答案，我看到了很多将 UI 元素与网络音频连接起来的方法，但我看到的所有方法似乎都不适合我。我有一种感觉，这也很简单。一如既往，我们将不胜感激!

编辑:我添加了 slidechange: 事件并将音高和频率的初始值设置为 slider 的值，它似乎工作得更好，但 slider 仍然没有影响音高或失谐。

新代码:

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/