diff --git a/app.js b/app.js index e594b218efc444d744f147730de8f55f7aa0ab6e..aae168a8df17ceb61c8006e40d0afd687ef04c17 100644 --- a/app.js +++ b/app.js @@ -24,19 +24,29 @@ app.get('/', function(req, res){ }); io.on('connection', function(socket){ + + io.sockets.emit('updateUserCount', Object.keys(io.engine.clients).length); + socket.on('disconnect', function(){ + io.sockets.emit('updateUserCount', Object.keys(io.engine.clients).length); + }); console.log('a user connected'); socket.on('bpm', function(newBpm){ bpm = newBpm; clearInterval(metronome); metronome = generateMetronome(bpm, metronome); io.sockets.emit('setBpmSlider', bpm); - }); + }); io.sockets.emit('setBpmSlider', bpm); + socket.on('playSound', function(data){ + socket.broadcast.emit('playExternalSound', data); + }); }); + + /* setInterval(function(){ io.sockets.emit('rand', Math.floor(Math.random() * 3)); @@ -66,3 +76,4 @@ function getStepPos(){ } + diff --git a/index.html b/index.html index 1f6629ebc5d1961a8b82f4bb66275d7de4a8da37..5ed045b4514941175d7f608a885a348f3a903876 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ <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> </div> <br /> <audio id="bd" preload="auto"> diff --git a/public/client.js b/public/client.js index 39fb6941adf84c3fe09008ad5ed68369cb09356d..71e2a3dc123eec4b23867eb550f8dfb987aa6c1b 100644 --- a/public/client.js +++ b/public/client.js @@ -1,123 +1,143 @@ var stepPos = 0; +var iosocket = io.connect(); - $(function(){ - // generate graphics - generateSteps(); - - var iosocket = io.connect(); - iosocket.on('connect', function () { - - }); - - // metronome - iosocket.on('metronome', function(serverStepPos){ - stepPos = serverStepPos; - advanceStep(stepPos); - playSound(); - }); - - // if bpm changes from other client, update slider pos here - iosocket.on('setBpmSlider', function(newSliderVal){ - $('#bpm').val(newSliderVal); - console.log(newSliderVal); - }); - - // send bpm change to server - $( "#bpm" ).change(function() { - iosocket.emit('bpm', $(this).val()); - }); - }); - - - function advanceStep(serverStepPos){ - /* - if(stepPos >= 16){ - stepPos = 0; - } - */ - $('.step'+serverStepPos).removeClass('inactive').addClass('active'); - - for(var i = 0; i < 16; i++){ - if(i != serverStepPos){ - $('.step'+i).removeClass('active').addClass('inactive'); - } - } - // stepPos++; - } + +$(function(){ + // generate graphics + generateSteps(); + + + iosocket.on('connect', function () { + + }); + + // metronome + iosocket.on('metronome', function(serverStepPos){ + stepPos = serverStepPos; + advanceStep(stepPos); + playSound(); + }); + + // if bpm changes from other client, update slider pos here + iosocket.on('setBpmSlider', function(newSliderVal){ + $('#bpm').val(newSliderVal); + console.log(newSliderVal); + }); + + iosocket.on('playExternalSound', function(data){ + console.log((data.pitch)); + playExternalSound(data.sound, parseInt(data.pitch)); + }); + + iosocket.on('updateUserCount', function(userCount){ + $('#userCount').text('(' + userCount + ')'); + }); + + // send bpm change to server + $( "#bpm" ).change(function() { + iosocket.emit('bpm', $(this).val()); + }); +}); + - function generateSteps(){ - for (var i = 0; i < 5; i++){ - if(i<4){ - $('#steps').append('<tr class="row" id="row'+i+'">'); - for(var j = 0; j < 16; j++){ - //if(j%4==0){ - $('#row'+i).append('<td id="td'+j+i+'"><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>'); - if(j%4==0){ - $('#td'+j+i).addClass('four'); - } - /* - }else{ - $('#row'+i).append('<td><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>'); - } - */ - +function advanceStep(serverStepPos){ +/* + if(stepPos >= 16){ + stepPos = 0; + } +*/ + $('.step'+serverStepPos).removeClass('inactive').addClass('active'); + + for(var i = 0; i < 16; i++){ + if(i != serverStepPos){ + $('.step'+i).removeClass('active').addClass('inactive'); + } + } +// stepPos++; +} + + +function generateSteps(){ + for (var i = 0; i < 5; i++){ + if(i<4){ + $('#steps').append('<tr class="row" id="row'+i+'">'); + for(var j = 0; j < 16; j++){ + //if(j%4==0){ + $('#row'+i).append('<td id="td'+j+i+'"><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>'); + if(j%4==0){ + $('#td'+j+i).addClass('four'); } - $('#row'+i).append( - '<div class="styled-select">'+ - '<select>'+ - '<option value="bd">Kick</option>'+ - '<option value="cowbell">Cowbell</option>'+ - '<option value="cymbal">Cymbal</option>'+ - '<option value="glitch">Glitch</option>'+ - '<option value="hhc">HiHat Closed</option>'+ - '<option value="hho">HiHat Open</option>'+ - '<option value="ht">Tom High</option>'+ - '<option value="mt">Tom Medium</option>'+ - '<option value="lt">Tom Low</option>'+ - '<option value="perch">Percussion High</option>'+ - '<option value="percl">Percussion Low</option>'+ - '<option value="rim">Rimshot</option>'+ - '<option value="shaker">Shaker</option>'+ - '<option value="snare">Snare</option>'+ - '</select>'+ - '</div>' - ); - $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds">'); - - $('#steps').append('</div>'); + /* }else{ - $('#steps').append('<tr>'); - for(var j = 0; j < 16; j++){ - $('#steps').append('<td class="row beatIndicator step'+j+' inactive" id="metronome"/>'); - } - $('#steps').append('<tr/>'); - } + $('#row'+i).append('<td><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>'); + } + */ + } - } + $('#row'+i).append( + '<div class="styled-select">'+ + '<select>'+ + '<option value="bd">Kick</option>'+ + '<option value="cowbell">Cowbell</option>'+ + '<option value="cymbal">Cymbal</option>'+ + '<option value="glitch">Glitch</option>'+ + '<option value="hhc">HiHat Closed</option>'+ + '<option value="hho">HiHat Open</option>'+ + '<option value="ht">Tom High</option>'+ + '<option value="mt">Tom Medium</option>'+ + '<option value="lt">Tom Low</option>'+ + '<option value="perch">Percussion High</option>'+ + '<option value="percl">Percussion Low</option>'+ + '<option value="rim">Rimshot</option>'+ + '<option value="shaker">Shaker</option>'+ + '<option value="snare">Snare</option>'+ + '</select>'+ + '</div>' + ); + $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds">'); - function playSound(){ - for (var i = 0; i < 4; i++){ - if($('.step'+stepPos)[i].checked){ - //if(i == 0){ - $('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].doperShift = 100; - this[sound].play(); - } + $('#steps').append('</div>'); + }else{ + $('#steps').append('<tr>'); + for(var j = 0; j < 16; j++){ + $('#steps').append('<td class="row beatIndicator step'+j+' inactive" id="metronome"/>'); } + $('#steps').append('<tr/>'); + } + } +} + +function playSound(){ + for (var i = 0; i < 4; i++){ + if($('.step'+stepPos)[i].checked){ + $('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].play(); + iosocket.emit('playSound', {pitch: $('#pitchRow'+i).val(), sound: sound}); } + } +} + +function playExternalSound(sound, pitch){ + + if($('#hearTheWorld').is(":checked") ? true : false){ + this[sound].pause(); + this[sound].currentTime = 0; + this[sound].playbackRate = pitch; + this[sound].play(); + } +} - function randomColor(){ - var value = Math.random() * 0xFF | 0; - var grayscale = (value << 16) | (value << 8) | value; - var color = '#' + grayscale.toString(16); - return color; - //return(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') + - //s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5) - } \ No newline at end of file +function randomColor(){ + var value = Math.random() * 0xFF | 0; + var grayscale = (value << 16) | (value << 8) | value; + var color = '#' + grayscale.toString(16); + return color; + //return(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') + + //s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5) +} \ No newline at end of file diff --git a/public/style.css b/public/style.css index 7697c97f59f0ad62005fc8c2fe4ff00b94d1ced8..27f678dcdda3c3547b28ff89324ca001e0881404 100644 --- a/public/style.css +++ b/public/style.css @@ -1,89 +1,89 @@ - body{ - margin-top:120px; - background-color:#1c1a1a; - font-family: 'Codystar', cursive; - color:#9d0000; - } +body{ + margin-top:120px; + background-color:#1c1a1a; + font-family: 'Codystar', cursive; + color:#9d0000; +} - #container{ - width:500px; - margin:auto; - } +#container{ + width:500px; + margin:auto; +} - .beatIndicator{ - border: 1px solid black; - width: 8px; - height: 8px; - margin-right:8px; - margin-left:8px; - border-radius: 5px; - float: left; - } +.beatIndicator{ + border: 1px solid black; + width: 8px; + height: 8px; + margin-right:8px; + margin-left:8px; + border-radius: 5px; + float: left; +} - .beatIndicator.inactive{ - background-color:#303030; - } +.beatIndicator.inactive{ + background-color:#303030; +} - .beatIndicator.active{ - background-color:#9d0000; - } +.beatIndicator.active{ + background-color:#9d0000; +} - .checkbox{ - width:20px!important; - } - .four{ - background-color:#3f0e0e!important; - } +.checkbox{ + width:20px!important; +} +.four{ + background-color:#3f0e0e!important; +} - input[type=checkbox].css-checkbox { - position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; - } +input[type=checkbox].css-checkbox { + position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; +} - input[type=checkbox].css-checkbox + label.css-label { - padding-left:20px; - height:20px; - display:inline-block; - line-height:20px; - background-repeat:no-repeat; - background-position: 0 0; - font-size:20px; - vertical-align:middle; - cursor:pointer; +input[type=checkbox].css-checkbox + label.css-label { + padding-left:20px; + height:20px; + display:inline-block; + line-height:20px; + background-repeat:no-repeat; + background-position: 0 0; + font-size:20px; + vertical-align:middle; + cursor:pointer; - } +} - input[type=checkbox].css-checkbox:checked + label.css-label { - background-position: 0 -20px; - } - label.css-label { - background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_e735e2688b7676957c8e335c4c9e2311.png); - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } +input[type=checkbox].css-checkbox:checked + label.css-label { + background-position: 0 -20px; +} +label.css-label { + background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_e735e2688b7676957c8e335c4c9e2311.png); + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} - td{ - vertical-align: middle!important; - } +td{ + vertical-align: middle!important; +} - .styled-select select { - background: #303030; - color:#d3d3d3; - padding: 5px; - font-size: 16px; - line-height: 1; - border: 0; - border-radius: 5px; - height: 25px; - -webkit-appearance: none; +.styled-select select { + background: #303030; + color:#d3d3d3; + padding: 5px; + font-size: 16px; + line-height: 1; + border: 0; + border-radius: 5px; + height: 25px; + -webkit-appearance: none; - } +} - #bpm{ - width:100%; - } +#bpm{ + width:100%; +}