Mix Youtube videos like a true DJ!
https://dj.tflcl.xyz
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.6 KiB
108 lines
2.6 KiB
2 years ago
|
// let id = window.location.search ? window.location.search.substring(1) : album;
|
||
|
// let playerA = {
|
||
|
// iframe: document.querySelector('#playerA'),
|
||
|
// player: undefined,
|
||
|
// id: 'anWaxGNDRJ4',
|
||
|
// vol: 100
|
||
|
// }
|
||
|
// let playerB = {
|
||
|
// iframe: document.querySelector('#playerB'),
|
||
|
// player: undefined,
|
||
|
// id: 'PhEuAuhH418',
|
||
|
// vol: 100
|
||
|
// }
|
||
|
|
||
|
// Loads the IFrame Player API code asynchronously.
|
||
|
let tag = document.createElement('script');
|
||
|
tag.src = 'https://www.youtube.com/iframe_api';
|
||
|
let firstScriptTag = document.getElementsByTagName('script')[0];
|
||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||
|
|
||
|
|
||
|
class player {
|
||
|
trackId;
|
||
|
// volume;
|
||
|
// id;
|
||
|
// iframe;
|
||
|
player;
|
||
|
// node;
|
||
|
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('.volumeSlider').value;
|
||
|
|
||
|
}
|
||
|
|
||
|
init(trackid) {
|
||
|
let src = `https://www.youtube.com/embed/${trackid}?enablejsapi=1&playsinline=1&autoplay=0&rel=0&modestbranding=1&version=3`;
|
||
|
this.iframe.setAttribute('src', src);
|
||
|
this.player = new YT.Player(this.id, {
|
||
|
events: {
|
||
|
'onReady': this.onPlayerReady.bind(this),
|
||
|
'onStateChange': onPlayerStateChange
|
||
|
}
|
||
|
});
|
||
|
|
||
|
this.node.querySelector('.volumeSlider').addEventListener('input', (e) => {
|
||
|
let volume = e.target.value;
|
||
|
this.volume = volume;
|
||
|
this.player.setVolume(volume);
|
||
|
});
|
||
|
}
|
||
|
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);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
let playerA = new player('playerA');
|
||
|
let playerB = new player('playerB');
|
||
|
|
||
|
|
||
|
function onYouTubeIframeAPIReady() {
|
||
|
playerA.init('anWaxGNDRJ4')
|
||
|
playerB.init('PhEuAuhH418');
|
||
|
}
|
||
|
|
||
|
function onPlayerStateChange(event) {
|
||
|
console.log('state change: ' + event.data);
|
||
|
}
|
||
|
|
||
|
let crossfader = document.querySelector('#crossfader');
|
||
|
|
||
|
crossfader.addEventListener('input', (e) => {
|
||
|
|
||
|
let normVal = crossfader.value / 1000;
|
||
|
// let coefB = normVal ** 2;
|
||
|
// let coefA = (1 - normVal) ** 2;
|
||
|
|
||
|
let coefB = min(normVal*2, 1);
|
||
|
let coefA = min((1-normVal)*2, 1);
|
||
|
|
||
|
// console.log('crossfader: ' + crossfader.value);
|
||
|
// console.log('coefA: ' + coefA);
|
||
|
// console.log('coefB: ' + coefB);
|
||
|
|
||
|
playerA.player.setVolume(playerA.volume * coefA);
|
||
|
playerB.player.setVolume(playerB.volume * coefB);
|
||
|
|
||
|
})
|
||
|
|
||
|
function min(x, y) {
|
||
|
if (x > y) {
|
||
|
return y;
|
||
|
} else {
|
||
|
return x;
|
||
|
}
|
||
|
}
|