Web Audio Crossfader

crossfade.js

var vineVideoElement = document.getElementById('vineVideo');
var instVideoElement = document.getElementById('instVideo');
var instGain;
var vineGain;
window.AudioContext = window.AudioContext||window.webkitAudioContext;
var context = new AudioContext();

function initCrossfade(){
  vineVideoElement.play();
  instVideoElement.play();
  var vine = context.createMediaElementSource(vineVideoElement);
  var inst = context.createMediaElementSource(instVideoElement);
  
  instGain = context.createGainNode();
  vineGain = context.createGainNode();
  
  vine.connect(vineGain);
  inst.connect(instGain);
  
  instGain.connect(context.destination);
  vineGain.connect(context.destination);
}

var updateVolumes = function(mouseEvent){
  var range = (vineVideoElement.offsetLeft + vineVideoElement.offsetWidth) - instVideoElement.offsetLeft;
  console.log('range: ',range);

  var crossfadePos = parseFloat(mouseEvent.clientX-(vineVideoElement.offsetLeft + vineVideoElement.offsetWidth));
  crossfadePos = Math.max(0, Math.min(crossfadePos, range))/range;
  console.log('cross: ',crossfadePos);
  vineGain.gain = (crossfadePos*-1)+1;
  instGain.gain = crossfadePos;
}


initCrossfade();

onmousemove = updateVolumes;