2023-10-03 06:53:25 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en" dir="ltr">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>DJ Controller Emulator</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="assets/stylesheets/style.css">
|
2023-10-15 19:48:02 -04:00
|
|
|
<script src="assets/scripts/knobs.js" charset="utf-8"></script>
|
2023-10-03 06:53:25 -04:00
|
|
|
<script src="assets/scripts/main.js" charset="utf-8"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
|
|
|
|
<div id="sections">
|
|
|
|
|
<div class="deck">
|
|
|
|
|
<div class="deck-effects">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="deck-playback">
|
|
|
|
|
<input class="speed-slider" type="range" min="0" value="63" step="1" max="127" oninput="controller.speed(0, 127 - this.value);" ondblclick="controller.speed(0, this.value = 63);">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="play">
|
|
|
|
|
<div class="deck-pads">
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(0, 0);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(0, 1);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(0, 2);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(0, 3);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(0, 4);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(0, 5);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(0, 6);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(0, 7);"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<button type="button" onclick="controller.load(0);">Load</button>
|
|
|
|
|
<button type="button" onclick="controller.play_pause(0);">PlayPause</button>
|
2023-10-15 19:48:02 -04:00
|
|
|
<button type="button" onclick="controller.sync(0);">Sync</button>
|
2023-10-03 06:53:25 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="mixer">
|
2023-10-15 19:48:02 -04:00
|
|
|
<div id="eq-knobs">
|
2023-10-03 06:53:25 -04:00
|
|
|
<div class="deck-eq-knobs">
|
2023-10-15 19:48:02 -04:00
|
|
|
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(0, 'high',this.value);"></knob-input>
|
|
|
|
|
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(0, 'mid',this.value);"></knob-input>
|
|
|
|
|
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(0, 'low',this.value);"></knob-input>
|
2023-10-03 06:53:25 -04:00
|
|
|
</div>
|
|
|
|
|
<div class="deck-eq-knobs">
|
2023-10-15 19:48:02 -04:00
|
|
|
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(1, 'high', this.value);"></knob-input>
|
|
|
|
|
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(1, 'mid', this.value);"></knob-input>
|
|
|
|
|
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(1, 'low', this.value);"></knob-input>
|
2023-10-03 06:53:25 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="volume">
|
|
|
|
|
<input class="volume-slider" type="range" min="0" value="127" step="1" max="127" oninput="controller.volume(0, this.value);">
|
|
|
|
|
<div id="volume-meters">
|
|
|
|
|
<div class="volume-meter">
|
|
|
|
|
<div id="volume-meter-left" class="volume-meter-level"></div>
|
|
|
|
|
<div class="silence-meter-level"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="volume-meter">
|
|
|
|
|
<div id="volume-meter-right" class="volume-meter-level"></div>
|
|
|
|
|
<div class="silence-meter-level"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<input class="volume-slider" type="range" min="0" value="127" step="1" max="127" oninput="controller.volume(1, this.value);">
|
|
|
|
|
</div>
|
|
|
|
|
<input id="crossfader" type="range" min="0" value="63" step="1" max="127" oninput="controller.crossfade(this.value);">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="reverse deck">
|
|
|
|
|
<div class="deck-effects">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="deck-playback">
|
|
|
|
|
<input class="speed-slider" type="range" min="0" value="63" step="1" max="127" oninput="controller.speed(1, 127 - this.value);" ondblclick="controller.speed(1, this.value = 63);">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="play">
|
|
|
|
|
<div class="deck-pads">
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(1, 0);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(1, 1);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(1, 2);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(1, 3);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(1, 4);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(1, 5);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(1, 6);"></button>
|
|
|
|
|
<button type="button" class="deck-pad" onclick="controller.pad(1, 7);"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<button type="button" onclick="controller.load(1);">Load</button>
|
|
|
|
|
<button type="button" onclick="controller.play_pause(1);">PlayPause</button>
|
2023-10-15 19:48:02 -04:00
|
|
|
<button type="button" onclick="controller.sync(1);">Sync</button>
|
2023-10-03 06:53:25 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
