From e77c0393a9a7ad579a55d04cd94bfbb0b922a5e9 Mon Sep 17 00:00:00 2001 From: Jonas Blumer <jonas.blumer@entwicklungspark.com> Date: Thu, 3 Dec 2015 17:32:05 +0100 Subject: [PATCH] added volume slider and labels for sliders --- index.html | 12 ++++++++---- public/client.js | 46 ++++++++++++++++++++++++++++++++++++++++------ public/style.css | 37 ++++++++++++++++++++++++++++++++++--- 3 files changed, 82 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 5ed045b..747fc4c 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 5dd5394..af36f35 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 7f293a9..4bc04b0 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; + + +} + -- GitLab