0

したがって、基本的な HTML 入力範囲を備えたパン機能があり、次の JavaScript コードを使用してパンを制御しています。

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

jQuery-Knob ライブラリで実装する方法はありますか? 変更機能と値の読み取りを使用してボリュームコントロールでそれを行いましたが、パンは複数の値を使用するため、実装方法がわかりません。

4

1 に答える 1

0

実装例。これは、等パワー パンニングの別の式を使用して行いましたが、完全ではありませんが、ノブ プラグインで変数に影響を与える方法を理解するのに役立つかもしれません。

 <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;
}
于 2015-02-27T10:35:24.187 に答える