browserdj
Version:
DJ mixer for web browser
124 lines • 5.04 kB
HTML
<html>
<head>
<title>Browser DJ Mixer</title>
<link rel="stylesheet" href="./stylesheets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./stylesheets/style.css">
<script type="text/javascript" src="./javascripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./javascripts/jquery-ui-10.0.2.min.js"></script>
<script type="text/javascript" src="./stylesheets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./javascripts/d3.v3.min.js"></script>
<script type="text/javascript" src="./javascripts/canvasLCD.js"></script>
<script type="text/javascript" src="./javascripts/base64-binary.js"></script>
<script type="text/javascript" src="./javascripts/browserdj.js"></script>
<link rel="stylesheet" href="./stylesheets/style.css">
</head>
<body>
<div class="row-fluid">
<div id="box" class="span12">
<div id="box_disp" class="row inbox">
<div id="box_lcd" class="row inbox">
<div class="span6">
<canvas id="canvasLCD1" class="lcd"></canvas>
</div>
<div class="span6">
<canvas id="canvasLCD2" class="lcd"></canvas>
</div>
</div>
<div id="box_eq" class="row inbox">
<div class="span6">
<div id="viz1" class="viz"></div>
</div>
<div class="span6">
<div id="viz2" class="viz"></div>
</div>
</div>
</div>
<div id="box_mixer" class="row inbox">
<div class="span2">
<p>3D-PAN </p>
<div id="panner1Y" class="sl"></div>
<p id="panner1Y_display" class="disptext">0</p>
<div id="panner1X" class="sl"></div>
<p id="panner1X_display" class="disptext">0</p>
</div>
<div class="span1">
<p>SPD</p>
<div id="playspeed_slider1" class="sl"></div>
<p id="playspeed_display1" class="disptext">1</p>
</div>
<div class="span1">
<p>HPF</p>
<div id="highpass1" class="sl"></div>
<p id="highpass_display1" class="disptext">0</p>
</div>
<div class="span1">
<p>LPF </p>
<div id="lowpass1" class="sl"></div>
<p id="lowpass_display1" class="disptext">30000</p>
</div>
<div class="span1">
<p>VOL </p>
<div id="playvolume_slider1" class="sl"></div>
<p id="playvolume_display1" class="disptext">1</p>
</div>
<div id="volB" class="span1">
<p>VOL</p>
<div id="playvolume_slider2" class="sl"></div>
<p id="playvolume_display2" class="disptext">1</p>
</div>
<div class="span1">
<p>LPF</p>
<div id="lowpass2" class="sl"></div>
<p id="lowpass_display2" class="disptext">30000</p>
</div>
<div class="span1">
<p>HPF</p>
<div id="highpass2" class="sl"></div>
<p id="highpass_display2" class="disptext">0</p>
</div>
<div class="span1">
<p>SPD</p>
<div id="playspeed_slider2" class="sl"></div>
<p id="playspeed_display2" class="disptext">1</p>
</div>
<div class="span2">
<p>3D-PAN </p>
<div id="panner2Y" class="sl"></div>
<p id="panner2Y_display" class="disptext">0</p>
<div id="panner2X" class="sl"></div>
<p id="panner2X_display" class="disptext">0</p>
</div>
</div>
<div id="box_play" class="row inbox">
<div id="box_play1" class="span4">
<ul class="navi">
<li style="display:none">
<input id="input_file_track1" type="file" accept="*">
</li>
<li class="navi_small"><a href="#" id="button_open_track1" class="icon_home">Load</a></li>
<li class="navi_small"><a href="#" id="stop1" class="icon_location">Stop</a></li>
<li><a href="#" id="play1" class="icon_home">Play</a></li>
</ul>
</div>
<div class="span4">
<div id="box_crossfader" class="inbox">
<div id="crossfader" class="sl"> </div>
</div>
<p id="crossfader_display">0</p>
</div>
<div id="box_play2" class="span4">
<ul class="navi">
<li><a id="play2" href="#" class="icon_home">Play</a></li>
<li class="navi_small"><a id="stop2" href="#" class="icon_location">Stop</a></li>
<li class="navi_small"><a href="#" id="button_open_track2" class="icon_home">Load</a></li>
<li style="display:none">
<input id="input_file_track2" type="file" accept="*">
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>