nealey/2track.html

## 2track.html
<!DOCTYPE html>
<!-- Crummy DJ software in pure JavaScript -->
<!-- I wrote in on Chrome using Mozilla documentation, so in theory it'll work on either. -->
<!-- 2017 Neale Pickett -->
<!-- Placed in the Public Domain -->
<html>
  <head>
    <script>
function loadFile(deck, e) {
  // Having the user select the file is how you get local files without upsetting CORS.
  // There is so much bad advice on the Internet. Holy cow.
  deck.src = URL.createObjectURL(e.target.files[0]);
}

function init() {
  var deck1 = document.querySelector("#deck1");
  var deck2 = document.querySelector("#deck2");
  var load1 = document.querySelector("#load1");
  var load2 = document.querySelector("#load2");

  load1.addEventListener("change", loadFile.bind(undefined, deck1));
  load2.addEventListener("change", loadFile.bind(undefined, deck2));

  var audioCtx = new AudioContext();

  var source1 = audioCtx.createMediaElementSource(deck1);
  var source2 = audioCtx.createMediaElementSource(deck2);

  var gain1 = audioCtx.createGain();
  var gain2 = audioCtx.createGain();

  source1.connect(gain1);
  source2.connect(gain2);
  gain1.connect(audioCtx.destination);
  gain2.connect(audioCtx.destination);

  function setFade() {
    var faderPos = document.querySelector("#fader").value;
    var g1 = 1.0;
    var g2 = 1.0;
    if (faderPos < 0.5) {
      g2 = faderPos * 2;
    } else {
      g1 = (1.0 - faderPos) * 2;
    }
    gain1.gain.value = g1;
    gain2.gain.value = g2;
  }

  document.querySelector("#fader").addEventListener("input", setFade);
}

window.addEventListener("load", init);
    </script>
    <title>Moo</title>
  </head>
  <body>
    <div>
      <audio id="deck1" controls></audio><input type="file" id="load1">
    </div>
    <div>
      <input id="fader" type="range" min="0" max="1" step="0.001">
    </div>
    <div>
      <audio id="deck2" controls></audio><input type="file" id="load2">
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<!-- Crummy DJ software in pure JavaScript -->
	<!-- I wrote in on Chrome using Mozilla documentation, so in theory it'll work on either. -->
	<!-- 2017 Neale Pickett -->
	<!-- Placed in the Public Domain -->
	<html>
	<head>
	<script>
	function loadFile(deck, e) {
	// Having the user select the file is how you get local files without upsetting CORS.
	// There is so much bad advice on the Internet. Holy cow.
	deck.src = URL.createObjectURL(e.target.files[0]);
	}

	function init() {
	var deck1 = document.querySelector("#deck1");
	var deck2 = document.querySelector("#deck2");
	var load1 = document.querySelector("#load1");
	var load2 = document.querySelector("#load2");

	load1.addEventListener("change", loadFile.bind(undefined, deck1));
	load2.addEventListener("change", loadFile.bind(undefined, deck2));

	var audioCtx = new AudioContext();

	var source1 = audioCtx.createMediaElementSource(deck1);
	var source2 = audioCtx.createMediaElementSource(deck2);

	var gain1 = audioCtx.createGain();
	var gain2 = audioCtx.createGain();

	source1.connect(gain1);
	source2.connect(gain2);
	gain1.connect(audioCtx.destination);
	gain2.connect(audioCtx.destination);

	function setFade() {
	var faderPos = document.querySelector("#fader").value;
	var g1 = 1.0;
	var g2 = 1.0;
	if (faderPos < 0.5) {
	g2 = faderPos * 2;
	} else {
	g1 = (1.0 - faderPos) * 2;
	}
	gain1.gain.value = g1;
	gain2.gain.value = g2;
	}

	document.querySelector("#fader").addEventListener("input", setFade);
	}

	window.addEventListener("load", init);
	</script>
	<title>Moo</title>
	</head>
	<body>
	<div>
	<audio id="deck1" controls></audio><input type="file" id="load1">
	</div>
	<div>
	<input id="fader" type="range" min="0" max="1" step="0.001">
	</div>
	<div>
	<audio id="deck2" controls></audio><input type="file" id="load2">
	</div>
	</body>
	</html>