diff --git a/app.js b/app.js index aae168a8df17ceb61c8006e40d0afd687ef04c17..040ea809d116faa09c9b1582f0d4d4d771f43ae1 100644 --- a/app.js +++ b/app.js @@ -38,25 +38,16 @@ io.on('connection', function(socket){ }); io.sockets.emit('setBpmSlider', bpm); + /* socket.on('playSound', function(data){ socket.broadcast.emit('playExternalSound', data); }); + */ + socket.on('grid', function(data){ + socket.broadcast.emit('updateExternalGrid', data); + }); }); - - - - -/* -setInterval(function(){ - io.sockets.emit('rand', Math.floor(Math.random() * 3)); - setTimeout(function(){ - io.sockets.emit('rand', 1); - }, speed/2); - - }, speed); -*/ - function generateMetronome(newBpm, oldMetronome){ clearInterval(oldMetronome); oldMetronome = null; diff --git a/public/client.js b/public/client.js index f728f3f2f16f906647537aba2eb6962b0cb01ce1..66388504e4403385b78d20319b893eb9f1a2b849 100644 --- a/public/client.js +++ b/public/client.js @@ -1,12 +1,11 @@ var stepPos = 0; var iosocket = io.connect(); - +var externalGrid = null; $(function(){ - // generate graphics - generateSteps(); + generateSteps(); iosocket.on('connect', function () { @@ -17,6 +16,7 @@ $(function(){ stepPos = serverStepPos; advanceStep(stepPos); playSound(); + playExternalSound(); }); // if bpm changes from other client, update slider pos here @@ -25,9 +25,9 @@ $(function(){ console.log(newSliderVal); }); - iosocket.on('playExternalSound', function(data){ - console.log((data.pitch)); - playExternalSound(data.sound, parseInt(data.pitch)); + iosocket.on('updateExternalGrid', function(data){ + //playExternalSound(data)); + externalGrid = data; }); @@ -44,11 +44,6 @@ $(function(){ function advanceStep(serverStepPos){ -/* - if(stepPos >= 16){ - stepPos = 0; - } -*/ $('.step'+serverStepPos).removeClass('inactive').addClass('active'); for(var i = 0; i < 16; i++){ @@ -56,7 +51,6 @@ function advanceStep(serverStepPos){ $('.step'+i).removeClass('active').addClass('inactive'); } } -// stepPos++; } @@ -65,17 +59,10 @@ function generateSteps(){ 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){ + $('#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>'); - } - */ - + } } $('#row'+i).append( '<div class="styled-select">'+ @@ -119,18 +106,41 @@ function playSound(){ this[sound].currentTime = 0; this[sound].playbackRate = $('#pitchRow'+i).val(); this[sound].play(); - iosocket.emit('playSound', {pitch: $('#pitchRow'+i).val(), sound: sound}); + //iosocket.emit('playSound', {pitch: $('#pitchRow'+i).val(), sound: sound}); } } } -function playExternalSound(sound, pitch){ +function getAllSteps(){ + var grid = new Array(4); + 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") ? $('#row'+i+' select').val() : '0'; + } + } + iosocket.emit('grid', grid); +} + +setInterval(function(){ + getAllSteps(); +}, 1000); - if($('#hearTheWorld').is(":checked") ? true : false){ - this[sound].pause(); - this[sound].currentTime = 0; - this[sound].playbackRate = pitch; - this[sound].play(); +function playExternalSound(){ + if(externalGrid){ + for(var i = 0; i < 4; i++){ + for(var j = 0; j < 16; j++){ + if(externalGrid[i][j] != 0){ + if(stepPos == j){ + this[externalGrid[i][j]].pause(); + this[externalGrid[i][j]].currentTime = 0; + //this[externalGrid[i][j]].playbackRate = pitch; + + this[externalGrid[i][j]].play(); + } + } + } + } } }