YTDJ/js/main.js

// let id = window.location.search ? window.location.search.substring(1) : album;
// let playerA = {
//   iframe: document.querySelector('#playerA'),
//   player: undefined,
//   id: 'anWaxGNDRJ4',
//   vol: 100
// }
// let playerB = {
//   iframe: document.querySelector('#playerB'),
//   player: undefined,
//   id: 'PhEuAuhH418',
//   vol: 100
// }

// Loads the IFrame Player API code asynchronously.
let tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


class player {
  trackId;
  // volume;
  // id;
  // iframe;
  player;
  // node;
  constructor(id) {
    this.id = id;
    this.iframe = document.querySelector('#'+this.id);
    // console.log('#'+this.id);
    // console.log(this.iframe);
    // this.volume = vol;

    this.node = this.iframe.parentNode;
    this.volume = this.node.querySelector('.volumeSlider').value;

  }

  init(trackid) {
    let src = `https://www.youtube.com/embed/${trackid}?enablejsapi=1&playsinline=1&autoplay=0&rel=0&modestbranding=1&version=3`;
    this.iframe.setAttribute('src', src);
    this.player = new YT.Player(this.id, {
      events: {
        'onReady': this.onPlayerReady.bind(this),
        'onStateChange': onPlayerStateChange
      }
    });

    this.node.querySelector('.volumeSlider').addEventListener('input', (e) => {
      let volume = e.target.value;
      this.volume = volume;
      this.player.setVolume(volume);
    });
  }
  onPlayerReady(e) {
    // console.log(e.target);
    // this.node.querySelector('.volumeSlider').value = this.player.getVolume();
    // e.target.playVideo();
    console.log(e.target);
    // e.target.setVolume(this.volume);
    this.player.setVolume(this.volume);
  }
}


let playerA = new player('playerA');
let playerB = new player('playerB');


function onYouTubeIframeAPIReady() {
  playerA.init('anWaxGNDRJ4')
  playerB.init('PhEuAuhH418');
}

function onPlayerStateChange(event) {
  console.log('state change: ' + event.data);
}

let crossfader = document.querySelector('#crossfader');

crossfader.addEventListener('input', (e) => {

  let normVal = crossfader.value / 1000;
  // let coefB = normVal ** 2;
  // let coefA = (1 - normVal) ** 2;

  let coefB = min(normVal*2, 1);
  let coefA = min((1-normVal)*2, 1);

  // console.log('crossfader: ' + crossfader.value);
  // console.log('coefA: ' + coefA);
  // console.log('coefB: ' + coefB);

  playerA.player.setVolume(playerA.volume * coefA);
  playerB.player.setVolume(playerB.volume * coefB);

})

function min(x, y) {
  if (x > y) {
    return y;
  } else {
    return x;
  }
}