Question

所以我在做项目，但遇到了问题因为我必须控制2个音频元素，不是这个问题，问题是当我移动范围时另一个音频元素的左侧得到相反的值。

示例：

音频1和音频2开头的值相同

audio1，audio2 = 1

但是当我移动轨道并且它是一个DOM元素时，audio2应该不会与audio1具有相同的值

audio1 = 1.25 audio2 = 0.75

audio1 = 0.75音频= 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

移动范围并得到相反的结果

0 个答案: