How do you control web audio API oscillator parameters with JQuery UI sliders without going through HTML form parameters?

Question

I have been using the JQuery UI slider to control oscillator parameters with the web audio API but the way I've been doing it is by first creating a corresponding HTML range slider , then hiding it and then using the JQuery slider to control the range slider which in turn controls the respective oscillator param. I am wondering if/how to do this in a manner where the JQuery slider controls the oscillator parameters directly.

http://jsfiddle.net/95zbH/

$(function(){




context = new webkitAudioContext();         


var pad1 = document.getElementById("pad1");

pad1.onmousedown= function () {
var pitchState = document.getElementById('oscPitch1').value;
oscillator = context.createOscillator(),  // Creates the oscillator 
oscillator.type = 2;  
oscillator.frequency.value = pitchState;                   
oscillator.connect(context.destination);  // Connects it to output
oscillator.noteOn(0); 


};

pad1.onmouseup = function ()    {  
oscillator.disconnect(); 

};



});








var pitchInput = document.getElementById("oscPitch1");


var sliderParams = {
        'orientation': "vertical",
        'range': "min",
        'min': .5,
        'max': 100,
        'animate': true,
        'step': 0.01,
        'slide': function(event, ui) {  
        pitchInput.value = ui.value;   // This remote controls the input slider

        },

        stop: function( event, ui ) {}

};

$('#sliderOne').slider(sliderParams);

Answer 1

Set oscillator.frequency.value from the sliderParams callback where you are now assigning the value to the html slider (replacing pitchInput.value = ui.value)

See: http://jsfiddle.net/fschwiet/95zbH/1/ (I didn't set the initial oscillator value, but moving the slider does update it)

$(function(){