diff --git a/css/main.css b/css/main.css
index aecf99d..9ff1efa 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,6 +1,7 @@
:root {
--bg-color: #223;
--text-color: #eee;
+ --text-color-light: #bbb;
--accent-color-1: #ff91d8;
--accent-color-1-light: #ffcdff;
--accent-color-2: #ffff7d;
@@ -112,16 +113,43 @@ iframe {
width: 50%;
}
+
+.control-label {
+ font-size: 0.8em;
+
+ margin: auto;
+ color: var(--text-color-light);
+}
+
+.control-label span {
+ color: var(--accent-color-2);
+}
+
+.volume-control {
+ padding-top: 1em;
+}
+.volume-control .control-label {
+ width: 5em;
+ padding-top: 1em;
+ /* transform: rotate(270deg); */
+ text-align: center;
+}
+
+span.volume-value {
+ color: var(--text-color-light);
+}
+
.speed-control {
width: 20%;
+ height: auto;
/* margin: auto; */
display: flex;
flex-direction: column;
+ justify-content: center;
}
-.speed-control span {
- font-size: 0.8em;
- margin: auto;
+.speed-control .control-label {
+ margin: 0.2em auto;
}
.speed-slider {
diff --git a/index.html b/index.html
index 588f1dd..57ed3ba 100644
--- a/index.html
+++ b/index.html
@@ -32,17 +32,23 @@
+
-
diff --git a/js/main.js b/js/main.js
index 5b67e0a..33414ed 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,27 +4,26 @@ tag.src = 'https://www.youtube.com/iframe_api';
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+//THE DJ CROSSFADER!!!
let crossfader = document.querySelector('#crossfader');
class player {
trackID;
- // volume;
- // id;
- // iframe;
player;
- // node;
+ crossfaderCoef;
+
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('.volume-slider').value;
+ this.volSliderVal = this.node.querySelector('.volume-slider-value');
+ this.volVal = this.node.querySelector('.volume-value')
+ this.volSliderVal.innerHTML = this.volume + '%';
this.loadButton = this.node.querySelector('.load-button');
this.speedSlider = this.node.querySelector('.speed-slider');
- this.speedSlider.previousElementSibling.innerHTML = 'Speed: ' + this.speedSlider.value;
+ this.speedSlider.nextElementSibling.querySelector('.speed-value').innerHTML = this.speedSlider.value;
}
init(trackID) {
@@ -40,17 +39,12 @@ class player {
});
}
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);
this.node.querySelector('.volume-slider').addEventListener('input', (e) => {
- let volume = e.target.value;
- this.volume = volume;
- this.player.setVolume(volume);
+ this.volume = e.target.value;
+ this.volSliderVal.innerHTML = this.volume + '%';
+ this.volumeUpdate();
});
this.loadButton.addEventListener('click', () => {
@@ -72,11 +66,11 @@ class player {
});
this.speedSlider.addEventListener('input', (e) => {
- this.speedSlider.previousElementSibling.innerHTML = 'Speed: ' + e.target.value;
+ this.speedSlider.nextElementSibling.querySelector('.speed-value').innerHTML = e.target.value;
this.player.setPlaybackRate(Number(e.target.value));
});
- // updateCrossfader(crossfader.value); //Throws an error at the beginning because the second player is not ready yet.
+ this.volumeUpdate();
}
onPlayerStateChange(e) {
@@ -103,6 +97,12 @@ class player {
});
}
+ volumeUpdate() {
+ let outputVolume = Math.round(this.volume * this.crossfaderCoef);
+ this.player.setVolume(outputVolume);
+ this.volVal.innerHTML = outputVolume + '%';
+ }
+
}
@@ -116,38 +116,65 @@ function onYouTubeIframeAPIReady() {
playerB.init('PhEuAuhH418');
}
-// while (bothPlayersReady < 2) {
-//
-// }
-crossfader.addEventListener('input', (e) => {
+calcCrossfaderCoefs(crossfader.value);
+crossfader.addEventListener('input', (e) => {
+ //Makes the slider stick on the middle
if (Math.abs(crossfader.value - 500) < 15) {
crossfader.value = 500;
}
- updateCrossfader(crossfader.value);
-});
+ calcCrossfaderCoefs(crossfader.value);
-//
+ let boxShadowStyle = '0 0 3em #ddbddd'
+ playerA.iframe.style.boxShadow = boxShadowStyle + componentToHex(Math.round(playerA.crossfaderCoef*255));
+ playerB.iframe.style.boxShadow = boxShadowStyle + componentToHex(Math.round(playerB.crossfaderCoef*255));
+ playerA.volumeUpdate();
+ playerB.volumeUpdate();
-function updateCrossfader(input) {
- let normVal = crossfader.value / 1000;
+ // updateCrossfader(crossfader.value);
+});
- // let coefB = normVal ** 2;
- // let coefA = (1 - normVal) ** 2;
+function calcCrossfaderCoefs(input) {
+ let normVal = input / 1000;
+
+ //Classic 'transition' curve
let coefB = Math.min(normVal*2, 1);
let coefA = Math.min((1-normVal)*2, 1);
+ //Cheap smooth curve
+ // let coefB = normVal ** 2;
+ // let coefA = (1 - normVal) ** 2;
- // Sets box-shadow transparency depending on crossfader position
- let boxShadowStyle = '0 0 3em #ddbddd'
- playerA.iframe.style.boxShadow = boxShadowStyle + componentToHex(Math.round(coefA*255));
- playerB.iframe.style.boxShadow = boxShadowStyle + componentToHex(Math.round(coefB*255));
+ //Amplitude-preserving curve (but not power)
+ // let coefB = (normVal ** 2) * (3 - 2 * normVal);
+ // let coefA = 1 - coefB;
- playerA.player.setVolume(playerA.volume * coefA);
- playerB.player.setVolume(playerB.volume * coefB);
+ // return [coefA, coefB];
+ playerA.crossfaderCoef = coefA;
+ playerB.crossfaderCoef = coefB;
}
+//
+
+
+// function updateCrossfader(input) {
+// let normVal = crossfader.value / 1000;
+//
+// // let coefB = normVal ** 2;
+// // let coefA = (1 - normVal) ** 2;
+// let coefB = Math.min(normVal*2, 1);
+// let coefA = Math.min((1-normVal)*2, 1);
+//
+//
+// // Sets box-shadow transparency depending on crossfader position
+// let boxShadowStyle = '0 0 3em #ddbddd'
+// playerA.iframe.style.boxShadow = boxShadowStyle + componentToHex(Math.round(coefA*255));
+// playerB.iframe.style.boxShadow = boxShadowStyle + componentToHex(Math.round(coefB*255));
+//
+// playerA.player.setVolume(playerA.volume * coefA);
+// playerB.player.setVolume(playerB.volume * coefB);
+// }
// From https://thomaspark.co/projects/needledrop/ by Thomas Park
// function getYouTubeID(url){