<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > YTDJ!🔊 Mix like a pro youtube DJ! 🎧< / title >
< meta name = "description" content = "Mix tracks from youtube like a true DJ! Make smooth transitions, funny layerings, and make everyone dance!" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "keywords" content = "dj,mixing,youtube,crossfader,transition,volume,fading,party" >
< meta property = "og:title" content = "YTDJ!🔊 Mix like a pro youtube DJ! 🎧" >
< meta property = "og:type" content = "website" >
< meta property = "og:url" content = "https://dj.tflcl.xyz" >
< meta property = "og:image" content = "https://dj.tflcl.xyz/img/social.png" >
< meta name = "og:image:width" content = "1600" >
< meta name = "og:image:height" content = "800" >
< meta name = "twitter:card" content = "summary_large_card" >
< meta name = "twitter:image" content = "https://dj.tflcl.xyz/img/social.png" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "/img/icon/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/img/icon/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/img/icon/favicon-16x16.png" >
< link rel = "manifest" href = "/site.webmanifest" >
< link rel = "stylesheet" href = "/css/normalize.css" >
< link rel = "stylesheet" href = "/css/main.css" >
< link rel = "stylesheet" href = "/css/shooting-star.css" >
< meta name = "theme-color" content = "#fafafa" >
< / head >
< body >
< div id = "bg" >
< img src = "img/stars_1920x1080.svg" alt = "A night sky with plenty of stars" >
< div class = "shooting-stars-wrapper" >
<!-- <div class="shooting - star"></div> -->
< / div >
< / div >
< div id = "desk" >
< div id = "players" >
< 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" >
< div class = "speed-control" >
< input type = "range" class = 'speed-slider' name = "speedRate" value = "1" min = '0.25' max = '2' step = '0.25' >
< p class = 'control-label' > Speed: < span class = 'speed-value' > < / span > < / p >
< / div >
< div class = "volume-control" >
< input type = "range" class = 'volume-slider' min = '0' max = '100' value = "80" >
< p class = 'control-label' > Vol: < span class = "volume-slider-value" > < / span > (< span class = "volume-value" > < / span > )< / p >
< / div >
< / div >
< div class = "player" >
< iframe id = "playerB" src = "" width = "480" height = "270" , frameborder = '0' > < / iframe >
< div class = "volume-control" >
< input type = "range" class = 'volume-slider' min = '0' max = '100' value = "80" >
< p class = 'control-label' > Vol: < span class = "volume-slider-value" > < / span > (< span class = "volume-value" > < / span > )< / p >
< / div >
< div class = "speed-control" >
< input type = "range" class = 'speed-slider' name = "speedRate" value = "1" min = '0.25' max = '2' step = '0.25' >
< p class = 'control-label' > Speed: < span class = 'speed-value' > < / span > < / p >
< / div >
< input class = 'load-button' type = "button" value = "Load new track or playlist" >
< / div >
<!-- <div class="hidden">
< iframe style = "border: 0; width: 480px; height: 270px;" src = "https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless > < a href = "https://clett.bandcamp.com/album/tancarville" > Tancarville by Clett< / a > < / iframe >
For a single track:
< iframe style = "border: 0; width: 480px; height: 270px;" src = "https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless > < a href = "https://clett.bandcamp.com/album/tancarville" > Tancarville by Clett< / a > < / iframe >
< / div > -->
< / div >
< div id = "crossfader-wrapper" >
< input type = "range" id = 'crossfader' name = "crossfader" min = '0' max = '1000' value = '500' >
< div class = "graduations" >
< div class = "graduation" > < / div >
< div class = "graduation graduation-small" > < / div >
< div class = "graduation graduation-small" > < / div >
< div class = "graduation graduation-small" > < / div >
< div class = "graduation graduation-small" > < / div >
< div class = "graduation" > < / div >
< div class = "graduation graduation-small" > < / div >
< div class = "graduation graduation-small" > < / div >
< div class = "graduation graduation-small" > < / div >
< div class = "graduation graduation-small" > < / div >
< div class = "graduation" > < / div >
< / div >
< / div >
< h1 > 🔊 Mix like a pro youtube DJ! 🎧< / h1 >
< div class = "footer" >
< p > < span id = 'shooting-stars-enable' > < / span > < span class = "spacer" > < / span > < a href = "https://tflcl.xyz" target = "_blank" > ⚒ Made by tflcl.xyz 🧩< / a > < span class = "spacer" > < / span > < a href = "#" id = "contact-me" > 💌 Contact me 💌< / a > < / p >
< / div >
< / div >
<!-- Some light analytics to know how people use this website -->
< script async defer data-website-id = "8db8311f-63a6-47d5-a77f-7d9b80db22b1" src = "https://stats.tflcl.xyz/sucre.js" > < / script >
<!-- Background was first made using P5JS -->
<!-- <script src="/js/vendor/p5.js"></script>
< script src = "/js/vendor/p5.svg.js" > < / script >
< script src = "/js/sketch.js" > < / script > -->
< script src = "/js/main.js" > < / script >
< / body >
< / html >
