jQuery-Knob to control web audio api panning - api

Question

So I have a panning feature with a basic HTML input range I am using the following javascript code to control the panning:
var x = this.valueAsNumber,
y = 0,
z = 1 - Math.abs(x);
panner2.setPosition(x,y,z);
Any idea how to implement it with jQuery-Knob library? I have done it with volume control using change function and reading in value but panning uses more than one value so unsure how to implement it.

Answer 1

Example implementation. I did this using another formula for equal power panning and it isn't perfect but maybe it can help you understand how to affect variables with the knob plug in.
<div class = "container">
<div id="pad" style=""></div>
<input id="panDial" class="dial" data-min="0" data-max="360" value="0" data-width="100">
</div>
$(function() {
var audioContext = new AudioContext();
var oscillator;
var val;
var x = 0;
var y = 0;
var z = 0;
var xDeg = 0;
var zDeg = xDeg + 90;
var valuePanDial = document.getElementById("panDial").value;
$(".dial").knob({
change: function(valuePanDial) {
xDeg = +valuePanDial;
zDeg = 180 - zDeg;
x = Math.sin(xDeg * (Math.PI / 180));
z = Math.sin(zDeg * (Math.PI / 180));
}
});
$("#pad").on("mousedown", function() {
oscillator = audioContext.createOscillator();
var panner = audioContext.createPanner();
panner.setPosition(x, y, z);
panner.panningModel = 'equalpower';
oscillator.frequency.value = 100;
oscillator.type = "sawtooth";
oscillator.connect(panner); // Connects it to output
panner.connect(audioContext.destination);
oscillator.start(audioContext.currentTime);
})
$("#pad").on("mouseup", function() {
oscillator.stop(audioContext.currentTime);
})
});
.container{
position:relative;
top:30px;
width:700px;
left:40%;
}
#pad {
background-color:orange;
margin-bottom:20px;
opacity:0.8;
border-style:solid;
border-color:grey;
width:200px;
height:100px;
}
#freqDial{
width:10px;
height: 10px;
}