First commit, proof of concept

js/main.js

@@ -0,0 +1,107 @@
+// 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;
+  }
+}

js/plugins.js

@@ -0,0 +1,24 @@
+// Avoid `console` errors in browsers that lack a console.
+(function() {
+  var method;
+  var noop = function () {};
+  var methods = [
+    'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
+    'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
+    'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
+    'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
+  ];
+  var length = methods.length;
+  var console = (window.console = window.console || {});
+
+  while (length--) {
+    method = methods[length];
+
+    // Only stub undefined methods.
+    if (!console[method]) {
+      console[method] = noop;
+    }
+  }
+}());
+
+// Place any jQuery/helper plugins in here.