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\/)/);