From 22faac2277ae366d3c7296a9b69e24d3c73ae84e Mon Sep 17 00:00:00 2001
From: Jonas Blumer <jonas.blumer@entwicklungspark.com>
Date: Fri, 27 Nov 2015 12:53:08 +0100
Subject: [PATCH] added hear the world
---
app.js | 13 ++-
index.html | 1 +
public/client.js | 242 +++++++++++++++++++++++++----------------------
public/style.css | 148 ++++++++++++++---------------
4 files changed, 218 insertions(+), 186 deletions(-)
diff --git a/app.js b/app.js
index e594b21..aae168a 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 1f6629e..5ed045b 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 39fb694..71e2a3d 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 7697c97..27f678d 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%;
+}
--
GitLab