api - jQuery-Knob 控制网络音频 api 平移

Question

所以我有一个带有基本 HTML 输入范围的平移功能，我使用以下 javascript 代码来控制平移：

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

知道如何使用jQuery-Knob 库来实现它吗？我已经使用更改功能和读取值通过音量控制完成了它，但是平移使用了多个值，因此不确定如何实现它。

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