" DJ Controller"
Bootstrap 4.1.1 Snippet by harunpehlivan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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();
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit

Questions / Comments: