From 0831cfec2fc90434400abf943e5ca2f4ad6fc42c Mon Sep 17 00:00:00 2001 From: Jonas Blumer <jonas.blumer@entwicklungspark.com> Date: Fri, 27 Nov 2015 11:30:32 +0100 Subject: [PATCH] background spastics and bpm control plus styled dropdowns --- app.js | 30 ++++++++++++++++----- index.html | 78 +++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 80 insertions(+), 28 deletions(-) diff --git a/app.js b/app.js index 4fac3e9..1ba600d 100644 --- a/app.js +++ b/app.js @@ -7,6 +7,12 @@ var port = (process.env.PORT || 5000); var bpm = 120; var stepPos = 0; +var metronome = null; +metronome = setInterval(function(){ + io.sockets.emit('metronome', getStepPos()); + }, (60000 / bpm)/4); + + http.listen(port, function() { console.log('Listening on port: '+port); }); @@ -19,9 +25,12 @@ app.get('/', function(req, res){ io.on('connection', function(socket){ console.log('a user connected'); - //socket.on('move', function(keycode){ - //socket.broadcast.emit('updatePlayer', keycode); - //}); + socket.on('bpm', function(newBpm){ + bpm = newBpm; + clearInterval(metronome); + metronome = generateMetronome(newBpm, metronome); + io.sockets.emit('setBpmSlider', newBpm); + }); /* socket.on('lose', function(){ @@ -40,9 +49,18 @@ setInterval(function(){ }, speed); */ -setInterval(function(){ - io.sockets.emit('metronome', getStepPos()); -}, (60000 / bpm)/4); + +function generateMetronome(newBpm, oldMetronome){ + clearInterval(oldMetronome); + oldMetronome = null; + + return setInterval(function(){ + io.sockets.emit('metronome', getStepPos()); + console.log(newBpm); + }, (60000 / newBpm)/4); + + +} function getStepPos(){ if(stepPos >= 16){ diff --git a/index.html b/index.html index c6dc5b6..735b501 100644 --- a/index.html +++ b/index.html @@ -77,6 +77,23 @@ 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; + + } + + #bpm{ + width:100%; + } + </style> <script> @@ -86,7 +103,6 @@ $(function(){ - // generate graphics generateSteps(); @@ -98,12 +114,19 @@ // metronome iosocket.on('metronome', function(serverStepPos){ stepPos = serverStepPos; - advanceStep(serverStepPos); + advanceStep(stepPos); playSound(); }); - -// iosocket.emit('move', e.keyCode); + // if bpm changes from other client, update slider pos here + iosocket.on('setBpmSlider', function(newSliderVal){ + $('#bpm').val(newSliderVal); + }); + + // send bpm change to server + $( "#bpm" ).change(function() { + iosocket.emit('bpm', $(this).val()); + }); }); @@ -142,24 +165,26 @@ } $('#row'+i).append( - '<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 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="powers">'); + $('#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{ @@ -175,7 +200,10 @@ function playSound(){ for (var i = 0; i < 4; i++){ if($('.step'+stepPos)[i].checked){ - var sound = $('#row'+i+'>select').val(); + //if(i == 0){ + $('body').css('background-color', randomColor()); + //} + var sound = $('#row'+i+' select').val(); console.log(sound); this[sound].pause(); this[sound].currentTime = 0; @@ -186,6 +214,11 @@ } } + function randomColor(){ + return(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') + + s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5) + } + @@ -196,6 +229,7 @@ <div id="container"> <table id="steps"> </table> + <input type="range" id="bpm" min="10" max="240" value="120" step="1" name="bpm" list="bpm"> </div> <br /> <audio id="bd" preload="auto"> -- GitLab