" DJ Controller"
Bootstrap 4.1.1 Snippet by harunpehlivan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <main> <div id="tutorial-container"> <div id="tutorial"> <script id="asp-embed-script" data-zindex="1000000" type="text/javascript" charset="utf-8" src="https://spark.adobe.com/page-embed.js"></script><a class="asp-embed-link" href="https://spark.adobe.com/page/r2P7QcZjaIWIN/" target="_blank"><img src="https://spark.adobe.com/page/r2P7QcZjaIWIN/embed.jpg?buster=1528119506718" alt="HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP" style="width:100%" border="0" /></a> </div> <p>Cerrar tutorial</p> </div> <div id="credits"><a href="http://harunpehlivan.fm.tc">HARUN PEHLİVAN</a></div> <div id="tutorial-button"> <div>?</div> </div> <section id="left"> <div class="tempo-container"><div class="tempo"></div></div> <div class="load"></div> <div class="sync"></div> <div class="play"></div> <div class="less"></div> <div class="more"></div> <div class="jog paused"> <div class="wave"></div> </div> <div class="volume-container"><div class="volume"></div></div> <div class="info"> <div class="song"></div> <div class="info-time"></div> <div class="info-tempo"><span>TEMPO: </span><strong>±0.00<span> %</span></strong></div> <input type="range" min="0" max="0" value="0" step="1"> </div> </section> <section id="right"> <div class="tempo-container"><div class="tempo"></div></div> <div class="load"></div> <div class="sync"></div> <div class="play"></div> <div class="less"></div> <div class="more"></div> <div class="jog paused"></div> <div class="volume-container"><div class="volume"></div></div> <div class="info"> <div class="song"></div> <div class="info-time"></div> <div class="info-tempo"><span>TEMPO: </span><strong>±0.00<span> %</span></strong></div> <input type="range" min="0" max="0" value="0" step="1"> </div> </section> <section id="crossfade-container"> <section id="crossfade"></section> </section> </main> <div id="songloader-container"> <section id="songloader"> <table> <thead> <tr> <th>Title</th> <th>Artist</th> <th>Duration</th> <th>BPM</th> </tr> </thead> <tbody> <tr onclick="setSong(1)"> <td>Push [Mak & Pasteman Remix]</td> <td>A-Trak feat. Andrew Wyatt</td> <td>06:59</td> <td>126</td> </tr> <tr onclick="setSong(2)"> <td>Thinking Of You [Original Mix]</td> <td>South Royston</td> <td>06:44</td> <td>124</td> </tr> <tr onclick="setSong(3)"> <td>On A Ragga Tip [Original Mix]</td> <td>My Digital Enemy</td> <td>04:57</td> <td>125</td> </tr> <tr onclick="setSong(4)"> <td>90's By Nature [Lucas & Steve Remix]</td> <td>Showtek feat MC Ambush</td> <td>04:37</td> <td>125</td> </tr> </tbody> </table> </section> </div> <p id="log"></p>
body { background-color:#000; overflow:hidden; } #tutorial-container { display:none; float:left; position:relative; background-color:#000; width:900px; height:499px; z-index:99999; } #tutorial-container p { text-align:center; font-size:30px; font-family:'Nova Square'; color:#fff; cursor:pointer; } #tutorial-container p:hover { text-shadow:0 0 10px #3FAEFD, 0 0 10px #3FAEFD; } #tutorial { position:relative; box-shadow:0 0 30px #fff; border-radius:10px 10px 60px 60px; overflow:hidden; width:100%; height:499px; } #tutorial-button { position:absolute; appearance:none; font-size:55px; top:160px; left:414px; margin:auto; } #tutorial-button div { font-family:'Nova Square'; font-size:50px; width:70px; height:63px; border:none; border-radius:50px; background-color:#333; color:#111; cursor:pointer; box-shadow:0 0 20px #000; font-weight:bold; text-align:center; padding-top:7px; } #tutorial-button div:hover { box-shadow:0 0 50px #3FAEFD, 0 0 50px #3FAEFD; background-color:#000; color:#fff; } #credits { position:absolute; font-size:55px; top:80px; left:352px; margin:auto; font-family: 'Kristi', sans-serif; } #credits a { text-decoration:none; color:#ddd; } #credits:hover { text-shadow:0 0 10px #3FAEFD, 0 0 10px #3FAEFD; } main { position:relative; width:900px; height:499px; background-image:url(http://www.michelacosta.com/images/2qyIBfw.jpg); margin:150px auto 0 auto; } #songloader-container { width:100%; height:150px; position:fixed; top:0; margin:auto; overflow:hidden; } #songloader { width:600px; background-color:#000; height:150px; margin:auto; position:relative; top:150px; border-radius:20px 20px 0 0; border:6px solid #444; box-shadow:0px 0px 5px #3FAEFD inset; padding:5px; } #left .jog, #left .tempo, #left .play, #left .volume, #right .jog, #right .tempo, #right .play, #right .volume, #left .less, #left .more, #right .less, #right .more, #left .load, #right .load, #left .sync, #right .sync, #crossfade { position:absolute; float:left; background-repeat:no-repeat; } #left .tempo:hover, #left .volume:hover, #right .tempo:hover, #right .volume:hover, #left .play:hover, #right .play:hover, #left .less:hover, #left .more:hover, #right .less:hover, #right .more:hover, #left .load:hover, #right .load:hover, #left .sync:hover, #right .sync:hover, #crossfade:hover { box-shadow:0 0 15px #DF6165, 0 0 15px #DF6165; cursor:pointer; } #left .jog { width:262px; height:262px; background-image:url(http://www.michelacosta.com/images/eOI2jNr.png); left:77px; top:149px; animation: girar infinite linear; animation-duration: 5s; } .running { animation-play-state: running!important; } .paused { animation-play-state: paused!important; } #left .tempo { width:48px; height:20px; left:35px; top:91px; background-image:url(http://www.michelacosta.com/images/OBlswus.png); } #left .volume { width:48px; height:20px; left:389px; top:278px; background-image:url(http://www.michelacosta.com/images/OBlswus.png); } .info { position:absolute; width:270px; height:60px; background-color:#000; border-radius:5px; border:2px solid #333; box-shadow:0 0 10px #555 inset; overflow:hidden; } #left .info { left:90px; top:12px; } #right .info { right:90px; top:12px; } #left .sync { width:32px; height:32px; left:35px; top:187px; border-radius:0 0 10px 10px; } #right .sync { width:32px; height:32px; right:35px; top:187px; border-radius:0 0 10px 10px; } #left .play { width:46px; height:46px; left:85px; top:401px; border-radius:23px; } #left .less { width:33px; height:32px; left:146px; top:433px; border-radius:16px; } #left .more { width:33px; height:32px; left:192px; top:439px; border-radius:16px; } #left .load { width:32px; height:32px; left:372px; top:32px; border-radius:16px; } #right .load { width:32px; height:32px; left:495px; top:32px; border-radius:16px; } #right .less { width:33px; height:32px; left:630px; top:433px; border-radius:16px; } #right .more { width:33px; height:32px; left:675px; top:439px; border-radius:16px; } #right .jog { width:262px; height:262px; background-image:url(http://www.michelacosta.com/images/eOI2jNr.png); left:562px; top:149px; animation: girar infinite linear; animation-duration: 5s; } #right .tempo { width:48px; height:20px; left:818px; top:91px; background-image:url(http://www.michelacosta.com/images/OBlswus.png); } #right .volume { width:48px; height:20px; left:465px; top:278px; background-image:url(http://www.michelacosta.com/images/OBlswus.png); } #right .play { width:46px; height:46px; left:568px; top:401px; border-radius:23px; } .info-time { display:inline-block; position:absolute; bottom:7px; left:0; height:20px; font-family:'Nova Square', sans-serif; color:#3FAEFD; text-transform:uppercase; white-space:nowrap; padding:10px 10px 0 10px; width:120px; font-weight:bold; } input[type=range] { appearance:none; display:inline-block; position:absolute; left:0; width:100%; height:3px; bottom:0; } /* Estilos para el input range copiados de css-tricks.com/styling-cross-browser-compatible-range-inputs-css */ input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ } /* Special styling for WebKit/Blink */ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 1px solid #000000; height: 11px; width: 10px; border-radius: 3px; background: #9a9a9a; cursor: pointer; margin-top: -4px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */ } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 3px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } input[type=range]:focus::-webkit-slider-runnable-track { background: #367ebd; } /* Estilos para el input range copiados de css-tricks.com/styling-cross-browser-compatible-range-inputs-css */ .info-tempo { display:inline-block; position:absolute; bottom:7px; right:0; height:20px; font-family:'Nova Square', sans-serif; color:#3FAEFD; text-transform:uppercase; white-space:nowrap; padding:10px 10px 0 10px; width:100px; } .info-tempo span { font-size:8px; } .song { display:inline-block; position:absolute; left:0; font-family:'Nova Square', sans-serif; color:#3FAEFD; text-transform:uppercase; white-space:nowrap; padding:10px; } #crossfade { width:24px; height:46px; left:57px; background-image:url(http://www.michelacosta.com/images/5bR284h.png); } @keyframes girar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #crossfade-container { position:relative; left:380px; top:432px; width:138px; height:46px; } #log { color:#fff; } table { width:100%; font-family:'Nova Square', sans-serif; color:#3FAEFD; } th { border-bottom:1px solid #3FAEFD; } td { border-bottom:1px dotted #3FAEFD; font-size:14px; } td:nth-child(3), td:nth-child(4) { text-align:right; } tbody tr:hover { background-color:#3FAEFD; color:#000; cursor:pointer; } iframe { position:relative; left:96px; top:2px; }
var tempoRange = 20; var jogSpeed = 5; var timeFactor = 0.1; var song1 = new Audio('http://www.michelacosta.com/html5/push.mp3'); var song2 = new Audio('http://www.michelacosta.com/html5/royston.mp3'); var song3 = new Audio('http://www.michelacosta.com/html5/ragga.mp3'); var song4 = new Audio('http://www.michelacosta.com/html5/showtek.mp3'); var leftSong = null; var rightSong = null; var channel2load = ''; modVolumeLeft = 0; modVolumeRight = 0; rateLeft = 1; rateRight = 1; $('#left .play').click(function() { if (leftSong != null) { diff = (((($('#left .volume').offset().top-482)*-1)*0.5)/54); currentVolLeft = (0.5+diff) - (modVolumeLeft*(0.5+diff)/100); leftSong.volume = currentVolLeft.toFixed(2); leftSong.playbackRate = rateLeft; if ($('#left .jog').hasClass('paused')) { $('#left .jog').removeClass('paused'); $('#left .jog').addClass('running'); marqueeLeft(); leftSong.play(); } else { $('#left .jog').removeClass('running'); $('#left .jog').addClass('paused'); marqueeLeftStop(); leftSong.pause(); } } else { requestSong(); } }); $('#right .play').click(function() { if (rightSong != null) { diff = (((($('#right .volume').offset().top-482)*-1)*0.5)/54); currentVolRight = (0.5+diff) - (modVolumeRight*(0.5+diff)/100); rightSong.volume = currentVolRight.toFixed(2); rightSong.playbackRate = rateRight; if ($('#right .jog').hasClass('paused')) { $('#right .jog').removeClass('paused'); $('#right .jog').addClass('running'); marqueeRight(); rightSong.play(); } else { $('#right .jog').removeClass('running'); $('#right .jog').addClass('paused'); marqueeRightStop(); rightSong.pause(); } } else { requestSong(); } }); $('#left .load').click(function() { if ($('#left .jog').hasClass('paused')) { toggleLoader('left'); } else { askToPause(); } }); $('#right .load').click(function() { if ($('#right .jog').hasClass('paused')) { toggleLoader('right'); } else { askToPause(); } }); $("#left .tempo").dblclick(function() { $('#left .tempo').animate({'top': 91}, 500, 'easeOutQuad'); $('#left .info-tempo > strong').html('±0.00<span> %</span>'); rateLeft = 1; }); $("#right .tempo").dblclick(function() { $('#right .tempo').animate({'top': 91}, 500, 'easeOutQuad'); $('#right .info-tempo > strong').html('±0.00<span> %</span>'); rateRight = 1; }); $("#left .tempo").draggable({ drag: dragLeftTempo, axis: "y", containment: [35, 187, 35, 294] }); $("#right .tempo").draggable({ drag: dragRightTempo, axis: "y", containment: [818, 187, 818, 294] }); $("#left .volume").draggable({ drag: dragLeftVolume, axis: "y", containment: [389, 428, 389, 536] }); $("#right .volume").draggable({ drag: dragRightVolume, axis: "y", containment: [465, 428, 465, 536] }); $("#crossfade").draggable({ drag: crossFade, axis: "x", containment: 'parent' }); function marqueeLeft() { $('#left .song').css('left', '100%'); $('#left .song').animate({ 'left': (0 - $('#left .song').width()) }, 5000, 'linear', marqueeLeft); } function marqueeRight() { $('#right .song').css('left', '100%'); $('#right .song').animate({ 'left': (0 - $('#right .song').width()) }, 5000, 'linear', marqueeRight); } function marqueeRightStop() { $('#right .song').stop(); $('#right .song').animate({'left': '0'}); } function marqueeLeftStop() { $('#left .song').stop(); $('#left .song').animate({'left': '0'}); } function dragLeftTempo() { dragTempo('#left'); } function dragRightTempo() { dragTempo('#right'); } function dragLeftVolume() { if (leftSong != null) { dragVolume('#left'); } } function dragRightVolume() { if (rightSong != null) { dragVolume('#right'); } } function dragTempo(side) { val = (($(side+' .tempo').offset().top - 240.5) * tempoRange / 53.5).toFixed(2); $(side+' .jog').css('animation-duration', jogSpeed-((jogSpeed*(val)/100))+'s'); if (val > 0) { val = '+' + val; } $(side+' .info-tempo > strong').html(val+'<span> %</span>'); switch(side) { case '#left': rateLeft = (1+(val/100)).toFixed(2); break; case '#right': rateRight = (1+(val/100)).toFixed(2); break; } } function dragVolume(side) { diff = ((($(side+' .volume').offset().top-482)*-1)*0.5)/54; switch(side) { case '#left': leftSong.volume = ((0.5+diff) - (modVolumeLeft*(0.5+diff)/100)).toFixed(2); break; case '#right': rightSong.volume = ((0.5+diff) - (modVolumeRight*(0.5+diff)/100)).toFixed(2); break; } } function crossFade() { currentVolLeft = (0.5+((($('#left .volume').offset().top-482)*-1)*0.5)/54).toFixed(2); currentVolRight = (0.5+((($('#right .volume').offset().top-482)*-1)*0.5)/54).toFixed(2); if ($('#crossfade').position().left-57 < 0) { modVolumeLeft = 0; modVolumeRight = (($('#crossfade').position().left-57)*100/-57).toFixed(2); } else if ($('#crossfade').position().left-57 > 0) { modVolumeRight = 0; modVolumeLeft = (($('#crossfade').position().left-57)*100/57).toFixed(2); } else { modVolumeLeft = 0; modVolumeRight = 0; } if (leftSong != null) { leftSong.volume = currentVolLeft - (modVolumeLeft*currentVolLeft/100).toFixed(2); } if (rightSong != null) { rightSong.volume = currentVolRight - (modVolumeRight*currentVolRight/100).toFixed(2); } } $('#left .less').click(function() { if (leftSong != null) { leftSong.currentTime-=timeFactor; } else { requestSong(); } }); $('#left .more').click(function() { if (leftSong != null) { leftSong.currentTime+=timeFactor; } else { requestSong(); } }); $('#right .less').click(function() { if (rightSong != null) { rightSong.currentTime-=timeFactor; } else { requestSong(); } }); $('#right .more').click(function() { if (rightSong != null) { rightSong.currentTime+=timeFactor; } else { requestSong(); } }); function setSong(id) { $('#'+channel2load+' .info-time').html('00:00'); $('#'+channel2load+' input').attr('max', 0); $('#'+channel2load+' input').val(0); switch(id) { case 1: loader = song1; $('#'+channel2load+' .song').html('A-Trak feat. Andrew Wyatt - Push [Mak & Pasteman Remix]'); toggleLoader(channel2load); break; case 2: loader = song2; $('#'+channel2load+' .song').html('South Royston - Thinking Of You [Original Mix]'); toggleLoader(channel2load); break; case 3: loader = song3; $('#'+channel2load+' .song').html('My Digital Enemy - On A Ragga Tip [Original Mix]'); toggleLoader(channel2load); break; case 4: loader = song4; $('#'+channel2load+' .song').html('Showtek feat MC Ambush - 90s By Nature [Lucas & Steve Remix]'); toggleLoader(channel2load); break; } if (channel2load == 'left') { leftSong = loader; leftSong.ontimeupdate = null; leftSong.ontimeupdate = function() {updateLeftTime()}; } else { rightSong = loader; rightSong.ontimeupdate = null; rightSong.ontimeupdate = function() {updateRightTime()}; } } function updateLeftTime() { leftSong.playbackRate = rateLeft; $('#left .info-time').html(getTime(leftSong.currentTime)); $('#left input').attr('max', leftSong.duration.toFixed(0)); $('#left input').val(leftSong.currentTime.toFixed(0)); } function updateRightTime() { rightSong.playbackRate = rateRight; $('#right .info-time').html(getTime(rightSong.currentTime)); $('#right input').attr('max', rightSong.duration.toFixed(0)); $('#right input').val(rightSong.currentTime.toFixed(0)); } function requestSong() { title = '¡No has cargado una canción!'; options = { body: 'Carga una canción en este canal pulsando el botón "LOAD"', icon: 'http://www.michelacosta.com/yo.png', } Notification.requestPermission(function(status) { new Notification(title, options); }); } function askToPause() { title = '¡Tienes que parar la reproducción!'; options = { body: 'Para la reproducción antes de cargar otro tema', icon: 'http://www.michelacosta.com/yo.png', } Notification.requestPermission(function(status) { new Notification(title, options); }); } function dislike() { title = '¡Desprecio infinito!'; options = { body: 'No nos gustan los DJs que usan el SYNC', icon: 'http://www.michelacosta.com/yo.png', } Notification.requestPermission(function(status) { new Notification(title, options); }); } function toggleLoader(deck) { channel2load = deck; if ($('#songloader').position().top == 150) { $('#songloader').animate({'top': 20}, 600, 'easeOutQuad'); $('#'+deck+' .info').css('background-color','#000033'); } else { $('#songloader').animate({'top': 150}, 600, 'easeOutQuad'); $('#'+deck+' .info').css('background-color','#000'); } } function getTime(seconds) { var hr = Math.floor(seconds / 3600); var min = Math.floor((seconds - (hr * 3600))/60); var sec = Math.floor(seconds - (hr * 3600) - (min * 60)); if (min < 10){ min = "0" + min; } if (sec < 10){ sec = "0" + sec; } return min + ':' + sec; } $('#left input').change(function() { if (leftSong != null) { leftSong.currentTime = $(this).val(); } }); $('#right input').change(function() { if (rightSong != null) { rightSong.currentTime = $(this).val(); } }); $('.sync').click(function() { dislike(); }); $('#tutorial-button>div').click(function() { $('#tutorial-container').show(); }); $('#tutorial-container>p').click(function() { $('#tutorial-container').hide(); });

Related: See More


Questions / Comments: