rebuilding online timing communication for tighter sync

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;

public/client.js

 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();
+                    }
+                }            
+            }
+        }
     }
 }