From e77c0393a9a7ad579a55d04cd94bfbb0b922a5e9 Mon Sep 17 00:00:00 2001
From: Jonas Blumer <jonas.blumer@entwicklungspark.com>
Date: Thu, 3 Dec 2015 17:32:05 +0100
Subject: [PATCH] added volume slider and labels for sliders
---
index.html | 12 ++++++++----
public/client.js | 46 ++++++++++++++++++++++++++++++++++++++++------
public/style.css | 37 ++++++++++++++++++++++++++++++++++---
3 files changed, 82 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
index 5ed045b..747fc4c 100644
--- a/index.html
+++ b/index.html
@@ -10,11 +10,15 @@
<body>
<center><h1>JDRUMMER XPRIENCE</h1></center>
<div id="container">
- <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>
+ <span id="sequencer">
+ <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>
+ </span>
+ <div id="ready">you ready?</div>
</div>
+
<br />
<audio id="bd" preload="auto">
<source src="sounds/bd.mp3"></source>
diff --git a/public/client.js b/public/client.js
index 5dd5394..af36f35 100644
--- a/public/client.js
+++ b/public/client.js
@@ -2,12 +2,17 @@ var stepPos = 0;
var iosocket = io.connect();
var externalGrid = null;
+var playInit = false;
$(function(){
generateSteps();
iosocket.on('connect', function () {
+ $('#ready').bind('click', function(){
+ switchActive();
+ playSound();
+ });
});
@@ -34,7 +39,7 @@ $(function(){
iosocket.on('clearExternalData', function(){
externalGrid = null;
});
-*/
+ */
iosocket.on('updateUserCount', function(userCount){
userCount--;
@@ -71,7 +76,7 @@ function generateSteps(){
}
$('#row'+i).append(
'<div class="styled-select">'+
- '<select>'+
+ '<select id="selectRow'+i+'">'+
'<option value="bd">Kick</option>'+
'<option value="cowbell">Cowbell</option>'+
'<option value="cymbal">Cymbal</option>'+
@@ -89,8 +94,25 @@ function generateSteps(){
'</select>'+
'</div>'
);
- $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds">');
+ switch(i){
+ case 0:
+ $('#selectRow'+i).val('bd');
+ break;
+ case 1:
+ $('#selectRow'+i).val('snare');
+ break;
+ case 2:
+ $('#selectRow'+i).val('hhc');
+ break;
+ case 3:
+ $('#selectRow'+i).val('ht');
+ break;
+ }
+
+ $('#row'+i).append('<input type="range" id="volumeRow'+i+'" min="0" max="1.0" value="0.8" step="0.01" name="power" list="sounds"><span class="tip">volume</span>');
+ $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds"><span class="tip">sample speed</span>');
+
$('#steps').append('</div>');
}else{
$('#steps').append('<tr>');
@@ -105,11 +127,12 @@ function generateSteps(){
function playSound(){
for (var i = 0; i < 4; i++){
if($('.step'+stepPos)[i].checked){
- $('body').css('background-color', randomColor());
+ //$('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].volume = $('#volumeRow'+i).val();
this[sound].play();
//iosocket.emit('playSound', {pitch: $('#pitchRow'+i).val(), sound: sound});
}
@@ -121,7 +144,12 @@ function getAllSteps(){
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") ? {sound: $('#row'+i+' select').val(), rate: $('#pitchRow'+i).val()} : '0';
+ grid[i][j] = $('.step' + j + '.row' + i).is(":checked") ? {
+ sound: $('#row'+i+' select').val(),
+ rate: $('#pitchRow'+i).val(),
+ volume: $('#volumeRow'+i).val()
+ }
+ : '0';
}
}
iosocket.emit('grid', grid);
@@ -139,7 +167,8 @@ function playExternalSound(){
if(stepPos == j){
this[externalGrid[i][j].sound].pause();
this[externalGrid[i][j].sound].currentTime = 0;
- this[externalGrid[i][j].sound].playbackRate = externalGrid[i][j].rate;
+ this[externalGrid[i][j].sound].playbackRate = externalGrid[i][j].rate;
+ this[externalGrid[i][j].sound].volume = externalGrid[i][j].volume;
this[externalGrid[i][j].sound].play();
}
}
@@ -148,6 +177,11 @@ function playExternalSound(){
}
}
+function switchActive(){
+ $('#sequencer').css('display', 'block');
+ $('#ready').css('display', 'none');
+}
+
function randomColor(){
var value = Math.random() * 0xFF | 0;
var grayscale = (value << 16) | (value << 8) | value;
diff --git a/public/style.css b/public/style.css
index 7f293a9..4bc04b0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4,17 +4,26 @@ body{
background-color:#1c1a1a;
font-family: 'Codystar', cursive;
color:#9d0000;
+ -webkit-user-select: none;
+-khtml-user-select: none;
+-moz-user-select: none;
+-o-user-select: none;
+user-select: none;
}
#container{
- width: 520px;
+ width: 650px;
margin:auto;
background-color: #d3d3d3;
padding: 10px;
border-radius: 12px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
--moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+ -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+ box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+}
+
+#sequencer{
+ display:none;
}
.beatIndicator{
@@ -94,3 +103,25 @@ td{
#bpm{
width:100%;
}
+
+
+#ready{
+ padding:10px;
+ cursor: pointer; cursor: hand;
+ background-color: #b8b8b8;
+ width:5px;
+ margin:auto;
+ width:80px;
+ text-align: center;
+ border:2px solid #3d3d3d;
+ border-radius: 12px;
+
+}
+
+.tip{
+ color: #1c1a1a!important;
+ font-size: 12px;
+
+
+}
+
--
GitLab