CODEWITHSUNDEEP
audiopanningjquery-knob
boombap123
boombap123

Reputation: 107

jQuery-Knob to control web audio API panning

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.

Upvotes: 0

Views: 331

Answers (1)

William
William

Reputation: 4578

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

Upvotes: 0

Related Questions