Jquery UI Slider with Web Audio Nodes

Question

I'm having a bit of an issue here. What I'm trying to have is a jQuery slider that displays its value and sets that value to the frequency and detune of my Oscillator. The problem is, I have the sliders working great, but as soon as I uncomment the Web Audio stuff or add the change: event to my sliders, they disappear.

Here's the working code:

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

But when I add this underneath the slide: event, they disappear

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

Same thing when I uncomment my Web Audio code:

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

Here's the working code in a fiddle with the problem code commented out: http://jsfiddle.net/ryanhagz/ruXd7/1/

I've looked everywhere for a proper answer and there's a bunch of ways I've seen to connect UI elements with Web Audio, but everything I've seen doesn't seem to work for me. I have a feeling it's something really simple too. As always, any help's appreciated!

EDIT: I've added the slidechange: event and set the initial value of the pitch and frequency to the value of the slider and it seems to work better, but the sliders still aren't effecting the pitch or detune.

new code:

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

When you are including your problem code you need to add a , after your slide events.

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

And

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

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