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.
 
 
 

379 lines
12 KiB

// Loads the Youtube 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);
//THE DJ CROSSFADER!!!
let crossfader = document.querySelector('#crossfader');
class player {
trackID;
player;
crossfaderCoef;
constructor(id) {
this.id = id;
this.iframe = document.querySelector('#'+this.id);
this.node = this.iframe.parentNode;
this.volume = this.node.querySelector('.volume-slider').value;
this.volSliderVal = this.node.querySelector('.volume-slider-value');
this.volVal = this.node.querySelector('.volume-value')
this.volSliderVal.innerHTML = this.volume + '%';
this.loadButton = this.node.querySelector('.load-button');
this.speedSlider = this.node.querySelector('.speed-slider');
this.speedSlider.nextElementSibling.querySelector('.speed-value').innerHTML = this.speedSlider.value;
}
init(trackID) {
this.trackID = trackID;
let src = `https://www.youtube-nocookie.com/embed/${trackID}?disablekb=1&enablejsapi=1&playsinline=1&autoplay=0&rel=0&modestbranding=1&iv_load_policy=3&version=3`;
this.iframe.setAttribute('src', src);
this.player = new YT.Player(this.id, {
events: {
'onReady': this.onPlayerReady.bind(this),
'onStateChange': this.onPlayerStateChange.bind(this),
'onError': this.onPlayerError.bind(this)
}
});
}
onPlayerReady(e) {
this.player.setVolume(this.volume);
this.node.querySelector('.volume-slider').addEventListener('input', (e) => {
this.volume = e.target.value;
this.volSliderVal.innerHTML = this.volume + '%';
this.volumeUpdate();
});
this.loadButton.addEventListener('click', () => {
let url = prompt('Enter a YouTube URL (track or playlist):', 'https://www.youtube.com/watch?v=' + this.trackID);
if (url) {
let resp = check_url(url);
if (resp < 0) {
alert('Wrong URL...');
console.log('Nothing to load!');
} else if (resp == 0) {
let newTrackID = get_video_id(url);
let newPlaylistID = get_playlist_id(url);
if (newPlaylistID[0] != 0) {
console.log('playlistid to load: ' + newPlaylistID);
this.loadPlaylist(newPlaylistID);
} else if (newTrackID != 0) {
console.log('track to load: ' + newTrackID);
this.load(newTrackID);
} else {
alert('Wrong URL...');
console.log('Nothing to load!');
}
} else if (resp == 1) {
// fetch_bandcamp_url(url);
alert('Wrong URL...');
console.log('Nothing to load!');
}
}
});
this.speedSlider.addEventListener('input', (e) => {
this.speedSlider.nextElementSibling.querySelector('.speed-value').innerHTML = e.target.value;
this.player.setPlaybackRate(Number(e.target.value));
});
this.volumeUpdate();
}
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);
}
loadPlaylist(playlistID) {
//First element should be the playlist ID, second element the index of the video to play
let list = playlistID[0];
let index = playlistID[1];
this.player.loadPlaylist({
list: list,
listType: 'playlist',
index: index
});
}
volumeUpdate() {
let outputVolume = Math.round(this.volume * this.crossfaderCoef);
this.player.setVolume(outputVolume);
this.volVal.innerHTML = outputVolume + '%';
let boxShadowStyle = '0 0 3em #ddbddd'
this.iframe.style.boxShadow = boxShadowStyle + componentToHex(Math.round(this.crossfaderCoef*255));
}
}
let playerA = new player('playerA');
let playerB = new player('playerB');
function onYouTubeIframeAPIReady() {
playerA.init('anWaxGNDRJ4')
playerB.init('PhEuAuhH418');
}
calcCrossfaderCoefs(crossfader.value);
crossfader.addEventListener('input', (e) => {
//Makes the slider stick on the middle
if (Math.abs(crossfader.value - 500) < 20) {
crossfader.value = 500;
}
calcCrossfaderCoefs(crossfader.value);
playerA.volumeUpdate();
playerB.volumeUpdate();
// updateCrossfader(crossfader.value);
});
function calcCrossfaderCoefs(input) {
let normVal = input / 1000;
//Classic 'transition' curve
let coefB = Math.min(normVal*2, 1);
let coefA = Math.min((1-normVal)*2, 1);
//Cheap smooth curve
// let coefB = normVal ** 2;
// let coefA = (1 - normVal) ** 2;
//Amplitude-preserving curve (but not power)
// let coefB = (normVal ** 2) * (3 - 2 * normVal);
// let coefA = 1 - coefB;
playerA.crossfaderCoef = coefA;
playerB.crossfaderCoef = coefB;
}
function check_url(url) {
let test = url.indexOf('youtu');
if (test > -1 && test < 13) {
return 0; //It's most likely a youtube link
} else if (url.indexOf('.bandcamp') > -1 || url.indexOf('/album/') > -1 || url.indexOf('/track/') > -1) {
return 1; //It's most likely a bandcamp link
} else {
return -1; //Wrong link
}
}
// From https://stackoverflow.com/a/55616161/14182148
function get_playlist_id(url) {
let VID_REGEX = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
let regPlaylist = /[?&]list=([^#\&\?]+)/;
let regIndex = /[?&]index=([^#]+)/;
let match = url.match(regPlaylist);
console.log('match ' + match);
let matchIndex = url.match(regIndex);
console.log('matchindex ' + matchIndex);
// console.log('regexp ' + match.match(/=LL([^#\&\?]*)/));
let index = 0;
if (matchIndex != null) {
index = matchIndex[1] - 1;
}
if (match != null && match[1].lenght > 2) { // lenght > 2 prevents from trying to load a "list=LL" (liked videos of signed-in user)
return [match[1], index];
} else {
return [0,0];
}
}
function get_video_id(url) { //originally 'video_id_from_playlist'
let VID_REGEX = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
let video_id = url.match(VID_REGEX);
if (video_id != null) {
return video_id[2];
} else {
return 0;
}
}
function fetch_bandcamp_url(url) {
let iframe = document.createElement('iframe');
iframe.setAttribute('class','hidden');
iframe.setAttribute('src',url);
playerB.node.parentNode.appendChild(iframe);
console.log(iframe);
let scrap = iframe.contentWindow.document.querySelector('script[data-tralbum]');
console.log('scrap: ' + scrap);
}
// Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg
// Converts values from 0-255 to 00-ff
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
// -----------------------------------
// BANDCAMP Tests
// -----------------------------------
// let surl = 'https://bandcamp.com/api/bcsearch_public_api/1/autocomplete_elastic';
// let req = {"search_text": "techno",
// "search_filter": "",
// "full_page": false,
// "fan_id": null
// };
// let bcURL = 'https://clett.bandcamp.com/track/placenta';
// let request = new Request(bcURL);
// let headers = new Headers({
// 'X-Requested-With': 'com.bandcamp.android',
// 'Content-Type': 'application/json',
// 'User-Agent': 'Dalvik/2.1.0 (Linux; U; Android 9; Unknown Device)',
// 'Host': 'bandcamp.com',
// });
//
// let data;
// fetch(bcURL, {
// method: 'GET',
// headers: headers
// })
// .then(response => response.json())
// .then(data => console.log('data: ' + data));
// console.log('response: ' + data);
// console.log('data: ' + data);
// let html = async await fetch(bcURL).text(); // html as text
// let doc = new DOMParser().parseFromString(html, 'text/html');
// doc.title; doc.body;
// let Http = new XMLHttpRequest();
// Http.open("GET", bcURL);
// Http.send();
//
// Http.onreadystatechange = (e) => {
// console.log(Http.responseText)
// }
// -----------------------------------
// BACKGROUND
// -----------------------------------
let areStarsShooting = true;
let shootingStarWrapper = document.getElementsByClassName('shooting-stars-wrapper')[0];
let shootingStar;
function newShootingStar() {
shootingStar = document.createElement('div');
let topStart = Math.floor(0.6 * window.innerHeight * Math.random());
let leftStart = Math.floor(window.innerWidth * (0.1 + 0.8 * Math.random()));
let duration = 1000 + Math.floor(Math.random() * 5000);
let distance = 200 + Math.floor(Math.random() * 500);
let angle = Math.floor(Math.random() * 30) - 15;
let direction = Math.random() < 0.5 ? -1 : 1;
shootingStar.style.top = topStart + 'px';
shootingStar.style.left = leftStart + 'px';
// root.style.setProperty('--shooting-star-duration', duration + "px");
// shootingStarCSS.insertRule(':root{--shooting-star-duration: '+ duration + 'ms}');
document.documentElement.style.setProperty('--shooting-star-duration', duration + "ms");
document.documentElement.style.setProperty('--shooting-star-translate', distance + "px");
document.documentElement.style.setProperty('--shooting-star-angle', angle + "deg");
document.documentElement.style.setProperty('--shooting-star-direction', direction);
shootingStarWrapper.appendChild(shootingStar);
shootingStar.classList.add('shooting-star');
setTimeout(() => {
shootingStar.remove();
// let nextIn = 10;
let nextIn = 7000 + Math.floor(Math.random() * 5000);
if (areStarsShooting) {
setTimeout(() => {
newShootingStar();
}, nextIn);
}
}, duration);
// setTimeout('newShootingStar()', duration + nextIn);
}
// function endShootingStar(el) {
// el.remove();
// console.log('removed!');
// let nextIn = 4000;
// setTimeout('newShootingStar()', nextIn);
// }
newShootingStar();
// Enable/disable shooting stars
// let separatorSpan = document.createElement('span');
// separatorSpan.innerHTML = ' - ';
// document.getElementById('shooting-stars-enable').after(separatorSpan);
document.getElementById('shooting-stars-enable').innerHTML = '⭐Disable shooting stars⭐';
document.getElementById('shooting-stars-enable').addEventListener('click', () => {
if (areStarsShooting) {
document.getElementById('shooting-stars-enable').innerHTML = '⭐Enable shooting stars⭐';
areStarsShooting = false;
} else {
document.getElementById('shooting-stars-enable').innerHTML = '⭐Disable shooting stars⭐';
areStarsShooting = true;
newShootingStar();
}
});
// Enable/disable shooting stars (with P5JS background)
// if (typeof processingSketch !== 'undefined') {
// let separatorSpan = document.createElement('span');
// separatorSpan.innerHTML = ' - ';
// document.getElementById('shooting-stars-enable').after(separatorSpan);
// document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐';
// }
// document.getElementById('shooting-stars-enable').addEventListener('click', () => {
// if (processingIsOn) {
// processingSketch.frameRate(0);
// document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐';
// processingIsOn = false;
// } else {
// processingSketch.frameRate(24);
// document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐';
// processingIsOn = true;
// }
// });
/*-------------------------------------------------------
- EMAIL OBFUSCATION - found here http://www.grall.name/posts/1/antiSpam-emailAddressObfuscation.html
-------------------------------------------------------*/
document.getElementById('contact-me').addEventListener('click', (e) => {
console.log('okay');
var y = decode("pbagnpg@gsypy.klm"); //https://rot13.com/
e.target.setAttribute("href", "mailto:" + y);
})
function decode(a) {
// ROT13 : a Caesar cipher
// letter -> letter' such that code(letter') = (code(letter) + 13) modulo 26
return a.replace(/[a-zA-Z]/g, function(c){
return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
})
};