extend sounds to second set, add placeholder array, use p5 preloading…

… and play based on padnumber
EMC23 · Mar 11, 2018 · 79ef710 · 79ef710
1 parent 7ab6e0c
commit 79ef710
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 675 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/drums.html b/drums.html
@@ -43,17 +43,54 @@
       <span class="sound">ride</span>
     </div>
   </div>
+
+  <hr>
+
+  <div class="keys">
+    <div data-key="36" class="key">
+      <span class="pad"></span>
+      <span class="sound">tink</span>
+    </div>
+    <div data-key="37" class="key">
+      <span class="pad"></span>
+      <span class="sound">beatbox</span>
+    </div>
+    <div data-key="38" class="key">
+      <span class="pad"></span>
+      <span class="sound">drum</span>
+    </div>
+    <div data-key="39" class="key">
+      <span class="pad"></span>
+      <span class="sound">kick 707</span>
+    </div>
+    <div data-key="40" class="key">
+      <span class="pad"></span>
+      <span class="sound">my first piano</span>
+    </div>
+    <div data-key="41" class="key">
+      <span class="pad"></span>
+      <span class="sound">piano</span>
+    </div>
+    <div data-key="42" class="key">
+      <span class="pad"></span>
+      <span class="sound">snare 707</span>
+    </div>
+    <div data-key="43" class="key">
+      <span class="pad"></span>
+      <span class="sound">snare 707 b</span>
+    </div>
+  </div>
 </div>
 
-  <audio data-key="9" src="sounds/boom.wav"></audio>
-  <audio data-key="10" src="sounds/kick.wav"></audio>
-  <audio data-key="11" src="sounds/snare.wav"></audio>
-  <audio data-key="12" src="sounds/tom.wav"></audio>
-  <audio data-key="25" src="sounds/clap.wav"></audio>
-  <audio data-key="26" src="sounds/hihat.wav"></audio>
-  <audio data-key="27" src="sounds/openhat.wav"></audio>
-  <audio data-key="28" src="sounds/ride.wav"></audio>
-  <audio data-key="x" src="sounds/tink.wav"></audio>
+  <!--<audio data-key="9" src="sounds/boom.wav"></audio>-->
+  <!--<audio data-key="10" src="sounds/kick.wav"></audio>-->
+  <!--<audio data-key="11" src="sounds/snare.wav"></audio>-->
+  <!--<audio data-key="12" src="sounds/tom.wav"></audio>-->
+  <!--<audio data-key="25" src="sounds/clap.wav"></audio>-->
+  <!--<audio data-key="26" src="sounds/hihat.wav"></audio>-->
+  <!--<audio data-key="27" src="sounds/openhat.wav"></audio>-->
+  <!--<audio data-key="28" src="sounds/ride.wav"></audio>-->
+  <!--<audio data-key="x" src="sounds/tink.wav"></audio>-->
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
   <script src="js/lib/p5.sound.js"></script>

diff --git a/js/drums.js b/js/drums.js
@@ -1,19 +1,41 @@
 
 var mySketch = function(myDrums) {
 
-  let padRange = [9,10,11,12,25,26,27,28];
+  let padRange = [9,10,11,12,25,26,27,28,36,37,38,39,40,41,42,43];
+  let sounds = ['boom', 'kick', 'snare', 'tom', 'clap', 'hihat', 'openhat', 'ride', 'tink', 'beatbox', 'drum', 'kick_707', 'my_first_piano', 'piano_p6', 'snare_707', 'snare_707_b', 'thumb_piano_monotraum', 'triangle_01', 'violin', 'whistle'];
   var padNumber = 9;
   var indPadItem;
   var padWidth = 100;
   var padHeight = 100;
   var padX = 50;
   var padY = 50;
   var amplitude;
-  var boom;
-  var volumeBoom;
+  var mic;
 
   myDrums.preload = function () {
-    //boom = myDrums.loadSound('sounds/ride.mp3');
+    boom = myDrums.loadSound('sounds/boom.wav');
+    kick = myDrums.loadSound('sounds/kick.wav');
+    snare = myDrums.loadSound('sounds/snare.wav');
+    tom = myDrums.loadSound('sounds/tom.wav');
+    clap = myDrums.loadSound('sounds/clap.wav');
+    hihat = myDrums.loadSound('sounds/hihat.wav');
+    openhat = myDrums.loadSound('sounds/openhat.wav');
+    ride = myDrums.loadSound('sounds/ride.wav');
+    tink = myDrums.loadSound('sounds/tink.wav');
+    beatbox = myDrums.loadSound('sounds/beatbox.mp3');
+    drum = myDrums.loadSound('sounds/drum.mp3');
+    kick_707 = myDrums.loadSound('sounds/Kick-707.mp3');
+    my_first_piano = myDrums.loadSound('sounds/my_first_piano.mp3');
+    piano_p6 = myDrums.loadSound('sounds/piano_p6.mp3');
+    snare_707 = myDrums.loadSound('sounds/Snare-707.mp3');
+    snare_707_b = myDrums.loadSound('sounds/Snare-707-b.mp3');
+    thumb_piano_monotraum = myDrums.loadSound('sounds/thumb-piano_monotraum.mp3');
+    triangle_01 = myDrums.loadSound('sounds/triangle_01.mp3');
+    violin = myDrums.loadSound('sounds/violin-spiccato-g2.mp3');
+    whistle = myDrums.loadSound('sounds/whistle.mp3');
+
+    flute = myDrums.loadSound('sounds/flute.mp3');
+
   }
 
   p5.midi.onInput = function (event) {
@@ -29,7 +51,6 @@ var mySketch = function(myDrums) {
     myDrums.line(0, 0, myDrums.width, myDrums.height);
 
     const keys = Array.from(document.querySelectorAll('.key'));
-
     keys.forEach(key => key.addEventListener('transitionend', removeTransition));
 
     //console.log(keys);
@@ -41,32 +62,46 @@ var mySketch = function(myDrums) {
 
     //console.log(boom);
 
-    myDrums.micOn();
+    //myDrums.micOn();
 
     myDrums.amplitude = new p5.Amplitude();
     //boom.setVolume(0.5);
-    myDrums.amplitude.setInput(mic);
+    //myDrums.amplitude.setInput(mic);
+    myDrums.amplitude.setInput(boom);
+
+    let sound = sounds.map(sound => {
+      console.log(sound);
+    });
+
+    myDrums.amplitude.setInput(kick);
+    myDrums.amplitude.setInput(snare);
+    myDrums.amplitude.setInput(tom);
+    myDrums.amplitude.setInput(clap);
+    myDrums.amplitude.setInput(hihat);
+    myDrums.amplitude.setInput(openhat);
+    myDrums.amplitude.setInput(ride);
+
     myDrums.amplitude.smooth(0.9);
 
     // /console.log(myDrums.amplitude.getLevel());
   }
 
   myDrums.draw = function () {
-    myDrums.background(0);
+    myDrums.background('#282828');
     myDrums.fill(255);
     var level = myDrums.amplitude.getLevel();
     //console.log(level);
-    var size = myDrums.map(level, 0, 1, 0, 1000);
+    var size = myDrums.map(level, 0, 1, 0, 200);
     myDrums.ellipse(myDrums.width/2, myDrums.height/2, size, size);
   }
 
   myDrums.playSound = function () {
     const padNumber = (event.data[1]);
-    const audio = document.querySelector(`audio[data-key="${event.data[1]}"]`);
-    const key = document.querySelector(`.key[data-key="${event.data[1]}"]`);
-    const pads = Array.from(document.querySelectorAll('.key'));
-      pads.forEach(pad => {
-    });
+    //const audio = document.querySelector(`audio[data-key="${padNumber}"]`);
+    const key = document.querySelector(`.key[data-key="${padNumber}"]`);
+    //const pads = Array.from(document.querySelectorAll('.key'));
+    //  pads.forEach(pad => {
+    //});
 
     //console.log(pads);
 
@@ -77,12 +112,79 @@ var mySketch = function(myDrums) {
     myDrums.strokeWeight(0);
     myDrums.text(padNumber, padX, padY);
 
+    //console.log(padRange);
+    //console.log(sounds);
+
     // trigger sound on pad down only (127)
     if (event.data[2] == 127) {
-      if (!audio) return;
-      audio.currentTime = 0;
-      audio.play();
+      //if (!audio) return;
+      //audio.currentTime = 0;
+      //audio.play();
+
+
+      console.log(padNumber);
+
       key.classList.add('playing');
+
+      if (padNumber == 9) {
+        boom.play();
+      }
+      if (padNumber == 10) {
+        kick.play();
+      }
+      if (padNumber == 11) {
+        snare.play();
+      }
+      if (padNumber == 12) {
+        tom.play();
+      }
+      if (padNumber == 25) {
+        clap.play();
+      }
+      if (padNumber == 26) {
+        hihat.play();
+      }
+      if (padNumber == 27) {
+        openhat.play();
+      }
+      if (padNumber == 28) {
+        ride.play();
+      }
+
+      // User setting pads
+
+      if (padNumber == 36) {
+        tink.play();
+      }
+
+      if (padNumber == 37) {
+        beatbox.play();
+      }
+
+      if (padNumber == 38) {
+        drum.play();
+      }
+
+      if (padNumber == 39) {
+        kick_707.play();
+      }
+
+      if (padNumber == 40) {
+        my_first_piano.play();
+      }
+
+      if (padNumber == 41) {
+        piano_p6.play();
+      }
+
+      if (padNumber == 42) {
+        snare_707.play();
+      }
+
+      if (padNumber == 43) {
+        snare_707_b.play();
+      }
+
     }
 
   }

diff --git a/styles/_variables.scss b/styles/_variables.scss