JQuery knob, input slider and web audio oscillator connecting but not working

Question

I have the web audio api and the JQuery knob library kind of working... but not quite. The knob slider controls an input slider but the value doesn't seem to be passed to the param I want to affect.

For a simple example see here:

http://jsfiddle.net/RKH35/1/

Code:

<input  id="gain1" type="range" class="dial" >


<script>

document.getElementById('gain1').addEventListener('change', function() {
gainNode.gain.value = this.value;
}); 

$(function() {

        var  value = document.getElementById("gain1").value;
        $(".dial").knob({ change : function (value) {    } 

                })
});


context = new webkitAudioContext();     


//Create oscillator object & params       
oscillator = context.createOscillator(),         oscillator.type = 2;      oscillator.frequency.value = 200;


//Create gain object & params
gainNode = context.createGainNode();       gainNode.gain.value = 1;  


//Connect devices
oscillator.connect(gainNode); 
gainNode.connect(context.destination);
oscillator.start(0); 

</script>

Answer 1

$(".dial").knob({ 
    change : function (value) {
        gainNode.gain.value = value;
    } 
})