diff --git a/index.html b/index.html index 5ed045b4514941175d7f608a885a348f3a903876..747fc4cc4d7747587f76325c909e64d8159e150c 100644 --- a/index.html +++ b/index.html @@ -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> diff --git a/public/client.js b/public/client.js index 5dd539451bf697028effecef34f28249bb6da0f9..af36f35c60b44acd9832c0fb4cf048afe0851cf6 100644 --- a/public/client.js +++ b/public/client.js @@ -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 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; diff --git a/public/style.css b/public/style.css index 7f293a942e0f27245bd43a30bed7738472d338ac..4bc04b01889d77734bb84df990c33ee16e3c1022 100644 --- a/public/style.css +++ b/public/style.css @@ -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; + + +} +