api - jQuery-旋钮控制Web音频api平移

Question

因此，我具有基本HTML输入范围的平移功能，正在使用以下javascript代码来控制平移:

var x = this.valueAsNumber,
y = 0,
z = 1 - Math.abs(x);
panner2.setPosition(x,y,z);

任何想法如何使用 jQuery-Knob library实现它？我已经通过使用更改功能和读入值的音量控制来完成此操作，但是平移使用了多个值，因此不确定如何实现它。

Answer 1

示例实现。我使用另一个公式进行了等功率平移，但这并不完美，但也许可以帮助您了解如何使用旋钮插件影响变量。

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