tfl/YTDJ
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added speedrate control

Browse Source
This commit is contained in:
TFLCL
2022-07-01 01:21:27 +02:00
parent f3c8d13689
commit 365163fb40
2 changed files with 50 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -31,11 +31,19 @@
<div class="player"> <div class="player">
<iframe id="playerA" src="" width="480" height="270", frameborder='0'></iframe> <iframe id="playerA" src="" width="480" height="270", frameborder='0'></iframe>
<input class='load-button' type="button" value="Load new track or playlist"> <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>
<div class="player"> <div class="player">
<iframe id="playerB" src="" width="480" height="270", frameborder='0'></iframe> <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"> <input class='load-button' type="button" value="Load new track or playlist">
</div> </div>
</div> </div>

63
js/main.js
View File

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