diff --git a/index.html b/index.html
index dcf4761..2d330cf 100644
--- a/index.html
+++ b/index.html
@@ -31,11 +31,19 @@
diff --git a/js/main.js b/js/main.js
index 7a3cee6..32291a4 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,6 +4,16 @@ tag.src = 'https://www.youtube.com/iframe_api';
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+let crossfader = document.querySelector('#crossfader');
+
+crossfader.addEventListener('input', (e) => {
+
+ if (Math.abs(crossfader.value - 500) < 15) {
+ crossfader.value = 500;
+ }
+
+ updateCrossfader(crossfader.value);
+});
class player {
trackID;
@@ -20,9 +30,10 @@ class player {
// this.volume = vol;
this.node = this.iframe.parentNode;
- this.volume = this.node.querySelector('.volumeSlider').value;
- this.loadButton = this.node.querySelector('.load-button')
-
+ this.volume = this.node.querySelector('.volume-slider').value;
+ this.loadButton = this.node.querySelector('.load-button');
+ this.speedSlider = this.node.querySelector('.speed-slider');
+ this.speedSlider.previousElementSibling.innerHTML = 'Speed: ' + this.speedSlider.value;
}
init(trackID) {
@@ -32,11 +43,20 @@ class player {
this.player = new YT.Player(this.id, {
events: {
'onReady': this.onPlayerReady.bind(this),
- 'onStateChange': this.onPlayerStateChange.bind(this)
+ 'onStateChange': this.onPlayerStateChange.bind(this),
+ 'onError': this.onPlayerError.bind(this)
}
});
+ }
+ 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('.volumeSlider').addEventListener('input', (e) => {
+ this.node.querySelector('.volume-slider').addEventListener('input', (e) => {
let volume = e.target.value;
this.volume = volume;
this.player.setVolume(volume);
@@ -54,20 +74,25 @@ 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.speedSlider.addEventListener('input', (e) => {
+ this.speedSlider.previousElementSibling.innerHTML = 'Speed: ' + e.target.value;
+ console.log(e.target.value);
+ console.log(this.player);
+ this.player.setPlaybackRate(Number(e.target.value));
+ });
+
+ updateCrossfader(crossfader.value)
}
onPlayerStateChange(e) {
console.log(this.id + ' state change: ' + e.data);
}
+ onPlayerError(e) {
+ console.log(this.id + ' - Error: ' + e.data);
+ }
+
load(trackID) {
this.player.loadVideoById(trackID);
}
@@ -85,14 +110,7 @@ function onYouTubeIframeAPIReady() {
playerB.init('PhEuAuhH418');
}
-let crossfader = document.querySelector('#crossfader');
-
-crossfader.addEventListener('input', (e) => {
-
- if (Math.abs(crossfader.value - 500) < 15) {
- crossfader.value = 500;
- }
-
+function updateCrossfader(input) {
let normVal = crossfader.value / 1000;
// let coefB = normVal ** 2;
@@ -108,8 +126,7 @@ crossfader.addEventListener('input', (e) => {
playerA.player.setVolume(playerA.volume * coefA);
playerB.player.setVolume(playerB.volume * coefB);
-
-});
+}
function getYouTubeID(url){
url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);