Переместить диапазон и получить противоположный результат

Question

, поэтому я работаю над проектом, и у меня есть проблема, потому что я должен контролировать 2 аудиоэлемента, проблема не в этом, проблема в том, что когда я перемещаю диапазон влево, другой аудиоэлемент получает противоположное значение.

пример:

audio 1 и audio2 имеют одинаковое значение в начале

audio1, audio2 = 1

, но когда я двигаюсьдорожка и ее элемент DOM и audio2 не должны иметь то же значение, что и audio1

audio1 = 1,25 audio2 = 0,75

audio1 = 0,75 audio = 1,25

интервал между 0 и 2, среднее значение - 1

<input type="range" id="volume1" class="control-volume" min="0" max="2" value="1" list="gain-vals1" step="0.05" data-action="volume1" />
    <datalist id="gain-vals1">
        <option value="0" label="min">
        <option value="2" label="max">
    </datalist>


        <audio id="p" src="h.mp4" crossorigin="anonymous" ></audio>
        <audio id="n"src="v.mp4" crossorigin="anonymous" ></audio>

<script type="text/javascript">
    console.clear();

    String.prototype.replaceAt=function(index, replacement) {
        return this.substr(0, index) + replacement+ this.substr(index + replacement.length);
    }

    // instigate our audio context

// for cross browser
const AudioContext = window.AudioContext ;
    const audioCtx = new AudioContext();

    const AudioContext1 = window.AudioContext ;
    const audioCtx1 = new AudioContext1();

    // load some sound
const audioElement = document.getElementById("p");
    const audioElement1 = document.getElementById("n");

const track = audioCtx.createMediaElementSource(audioElement);
    const track1 = audioCtx1.createMediaElementSource(audioElement1);

////////////////////////////////////////////////////////////////////

const playButton = document.querySelector('.tape-controls-play');

    var vid = document.getElementById("myVideo");
    var vid1 = document.getElementById("myVideo1");

// play pause audio
playButton.addEventListener('click', function() {

    // check if context is in suspended state (autoplay policy)
    if (audioCtx.state === 'suspended'||audioCtx1.state === 'suspended' ) {
        audioCtx.resume();
        audioCtx1.resume();
    }

    if (this.dataset.playing === 'false') {
        audioElement.play();
        audioElement1.play();
        vid.play();
        vid1.play();
        this.dataset.playing = 'true';
    // if track is playing pause it
    } else if (this.dataset.playing === 'true') {
        audioElement.pause();
        audioElement1.pause();
        vid.pause();
        vid1.pause();
        this.dataset.playing = 'false';
    }

    let state = this.getAttribute('aria-checked') === "true";
    this.setAttribute( 'aria-checked', state ? "false" : "true" );

}, false);


// if track ends // todo: to check
audioElement.addEventListener('ended', () => {
    playButton.dataset.playing = 'false';
    playButton.setAttribute( "aria-checked", "false" );
}, false);

    // volume
    const gainNode = audioCtx.createGain();
    const gainNode1 = audioCtx1.createGain();
    //  const volumeControl = document.querySelector('[data-action="volume"]');
    const volumeControl1 = document.querySelector('[data-action="volume1"]');

    // panning
const pannerOptions = {pan: -1};
const panner = new StereoPannerNode(audioCtx, pannerOptions);


 /*   volumeControl.addEventListener('input', function() {
        gainNode.gain.value = this.value;
        panner.pan; console.log(this.value);

    }, false);*/
    //panning2///////////////////////////////////////////////////////////////

    const pannerOptions1 = {pan: 1};
    const panner1 = new StereoPannerNode(audioCtx1, pannerOptions1);

  /*  const pannerControl1 = document.querySelector('[data-action="panner1"]');
    pannerControl1.addEventListener('input', function() {
        panner1.pan.value = this.value;
        console.log(this.value);

    }, false);*/
    var i=1;
    var k=1;
    let f1 =null;
    var  f2=null;
var g=null;
// is just a try not a correct code 
    volumeControl1.addEventListener('input', function() {
        f1=gainNode.gain.value;
        f2=gainNode1.gain.value;
        panner1.pan;
        panner.pan;
        g=this.value;

            f1=g;
            console.log(g);

               var n = g.toString();
        console.log(n.match(/0./g));

            if((n.charAt(0)==='0')){
            f1=g;
            //console.log(g);

            n=n.replaceAt(n.indexOf('.')-1,'1');
              var g2 = parseFloat(n);
               f2=g2;
             //  console.log(g2);
            }else
            if((n.charAt(0)==='2') ||(n.match(/1./g))){
                      f2=g;
                      n=n.replaceAt(n.indexOf('.')-1,'0');
                      n=n.replace('2','0')
                     var g3 = parseFloat(n);
                     f1=g3;
                }
            else
            if(n.charAt(0)==='1') {
                    f1=g;
                    f2=g;
                }

            console.log("v "+f1+"  v2  "+f2);


        /* else
                {
            gainNode1.gain.value = this.value;
            panner1.pan;
            panner.pan;
            gainNode.gain.value=this.value;
            console.log(this.value);}

    */
    }, false);



////////////////////////////////////////////////////



    track.connect(panner).connect(gainNode).connect(audioCtx.destination);
   track1.connect(panner1).connect(gainNode1).connect(audioCtx1.destination);

</script>

, если кто-нибудь может помочь мне найти решение этой проблемы, я буду благодарен tnx