Skip to content

Instantly share code, notes, and snippets.

Created July 11, 2017 03:37
Show Gist options
  • Save nealey/02f545fcdc6d254e26178341937aaacb to your computer and use it in GitHub Desktop.
Save nealey/02f545fcdc6d254e26178341937aaacb to your computer and use it in GitHub Desktop.
Basic 2-track DJ software in pure HTML5 JavaScript
<!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 -->
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([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();
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);
<audio id="deck1" controls></audio><input type="file" id="load1">
<input id="fader" type="range" min="0" max="1" step="0.001">
<audio id="deck2" controls></audio><input type="file" id="load2">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment