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