Added speedrate control

index.html

@@ -31,11 +31,19 @@
       <div class="player">
         <iframe id="playerA" src="" width="480" height="270", frameborder='0'></iframe>
         <input class='load-button'  type="button" value="Load new track or playlist">
-        <input type="range" class="volumeSlider" min='0' max = '100' value="80">
+        <div class="speed-control">
+          <span class='speed-value'></span>
+          <input type="range" class='speed-slider' name="speedRate" value="1" min='0.25' max='2' step='0.25'>
+        </div>
+        <input type="range" class="volume-slider" min='0' max = '100' value="80">
       </div>
       <div class="player">
         <iframe id="playerB" src="" width="480" height="270", frameborder='0'></iframe>
-        <input type="range" class="volumeSlider" min='0' max = '100' value="80">
+        <input type="range" class='volume-slider' min='0' max = '100' value="80">
+        <div class="speed-control">
+          <span class='speed-value'></span>
+          <input type="range" class='speed-slider' name="speedRate" value="1" min='0.25' max='2' step='0.25'>
+        </div>
         <input class='load-button' type="button" value="Load new track or playlist">
       </div>
     </div>

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