Skip to content
Snippets Groups Projects
Commit e77c0393 authored by Jonas Blumer's avatar Jonas Blumer
Browse files

added volume slider and labels for sliders

parent 8a4040d9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html
+ 8
− 4
View file @ e77c0393
......@@ -10,11 +10,15 @@
<body>
<center><h1>JDRUMMER XPRIENCE</h1></center>
<div id="container">
<table id="steps">
</table>
<input type="range" id="bpm" min="100" max="180" value="120" step="1" name="bpm" list="bpm">
<input type="checkbox" class="css-checkbox checkbox" id="hearTheWorld" style="color:#3d3d3d"/> <label for="hearTheWorld" class="css-label" style="padding-left:30px;">hear the world! <span id="userCount"></span></label>
<span id="sequencer">
<table id="steps">
</table>
<input type="range" id="bpm" min="100" max="180" value="120" step="1" name="bpm" list="bpm">
<input type="checkbox" class="css-checkbox checkbox" id="hearTheWorld" style="color:#3d3d3d"/> <label for="hearTheWorld" class="css-label" style="padding-left:30px;">hear the world! <span id="userCount"></span></label>
</span>
<div id="ready">you ready?</div>
</div>
<br />
<audio id="bd" preload="auto">
<source src="sounds/bd.mp3"></source>
......
public/client.js
+ 40
− 6
View file @ e77c0393
......@@ -2,12 +2,17 @@ var stepPos = 0;
var iosocket = io.connect();
var externalGrid = null;
var playInit = false;
$(function(){
generateSteps();
iosocket.on('connect', function () {
$('#ready').bind('click', function(){
switchActive();
playSound();
});
});
......@@ -34,7 +39,7 @@ $(function(){
iosocket.on('clearExternalData', function(){
externalGrid = null;
});
*/
*/
iosocket.on('updateUserCount', function(userCount){
userCount--;
......@@ -71,7 +76,7 @@ function generateSteps(){
}
$('#row'+i).append(
'<div class="styled-select">'+
'<select>'+
'<select id="selectRow'+i+'">'+
'<option value="bd">Kick</option>'+
'<option value="cowbell">Cowbell</option>'+
'<option value="cymbal">Cymbal</option>'+
......@@ -89,8 +94,25 @@ function generateSteps(){
'</select>'+
'</div>'
);
$('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds">');
switch(i){
case 0:
$('#selectRow'+i).val('bd');
break;
case 1:
$('#selectRow'+i).val('snare');
break;
case 2:
$('#selectRow'+i).val('hhc');
break;
case 3:
$('#selectRow'+i).val('ht');
break;
}
$('#row'+i).append('<input type="range" id="volumeRow'+i+'" min="0" max="1.0" value="0.8" step="0.01" name="power" list="sounds"><span class="tip">volume</span>');
$('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds"><span class="tip">sample&nbsp;speed</span>');
$('#steps').append('</div>');
}else{
$('#steps').append('<tr>');
......@@ -105,11 +127,12 @@ function generateSteps(){
function playSound(){
for (var i = 0; i < 4; i++){
if($('.step'+stepPos)[i].checked){
$('body').css('background-color', randomColor());
//$('body').css('background-color', randomColor());
var sound = $('#row'+i+' select').val();
this[sound].pause();
this[sound].currentTime = 0;
this[sound].playbackRate = $('#pitchRow'+i).val();
this[sound].volume = $('#volumeRow'+i).val();
this[sound].play();
//iosocket.emit('playSound', {pitch: $('#pitchRow'+i).val(), sound: sound});
}
......@@ -121,7 +144,12 @@ function getAllSteps(){
for(var i = 0; i < 4; i++){
grid [i] = new Array(16);
for(var j = 0; j < 16; j++){
grid[i][j] = $('.step' + j + '.row' + i).is(":checked") ? {sound: $('#row'+i+' select').val(), rate: $('#pitchRow'+i).val()} : '0';
grid[i][j] = $('.step' + j + '.row' + i).is(":checked") ? {
sound: $('#row'+i+' select').val(),
rate: $('#pitchRow'+i).val(),
volume: $('#volumeRow'+i).val()
}
: '0';
}
}
iosocket.emit('grid', grid);
......@@ -139,7 +167,8 @@ function playExternalSound(){
if(stepPos == j){
this[externalGrid[i][j].sound].pause();
this[externalGrid[i][j].sound].currentTime = 0;
this[externalGrid[i][j].sound].playbackRate = externalGrid[i][j].rate;
this[externalGrid[i][j].sound].playbackRate = externalGrid[i][j].rate;
this[externalGrid[i][j].sound].volume = externalGrid[i][j].volume;
this[externalGrid[i][j].sound].play();
}
}
......@@ -148,6 +177,11 @@ function playExternalSound(){
}
}
function switchActive(){
$('#sequencer').css('display', 'block');
$('#ready').css('display', 'none');
}
function randomColor(){
var value = Math.random() * 0xFF | 0;
var grayscale = (value << 16) | (value << 8) | value;
......
public/style.css
+ 34
− 3
View file @ e77c0393
......@@ -4,17 +4,26 @@ body{
background-color:#1c1a1a;
font-family: 'Codystar', cursive;
color:#9d0000;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#container{
width: 520px;
width: 650px;
margin:auto;
background-color: #d3d3d3;
padding: 10px;
border-radius: 12px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
#sequencer{
display:none;
}
.beatIndicator{
......@@ -94,3 +103,25 @@ td{
#bpm{
width:100%;
}
#ready{
padding:10px;
cursor: pointer; cursor: hand;
background-color: #b8b8b8;
width:5px;
margin:auto;
width:80px;
text-align: center;
border:2px solid #3d3d3d;
border-radius: 12px;
}
.tip{
color: #1c1a1a!important;
font-size: 12px;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment