sounds, mic input output as ellipse, not great as it relies on mic vo…

…lume levels
EMC23 · Mar 11, 2018 · a72b0aa · a72b0aa
1 parent 73d05d1
commit a72b0aa
Show file tree

Hide file tree

Showing 46 changed files with 48,333 additions and 0 deletions.
diff --git a/drums.html b/drums.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS Drum Kit</title>
+  <link rel="stylesheet" href="styles/drums.css">
+</head>
+<body>
+
+<div class="container">
+  <div id="canvas"></div>
+  <div class="keys">
+    <div data-key="9" class="key">
+      <span class="pad"></span>
+      <span class="sound">boom</span>
+    </div>
+    <div data-key="10" class="key">
+      <span class="pad"></span>
+      <span class="sound">kick</span>
+    </div>
+    <div data-key="11" class="key">
+      <span class="pad"></span>
+      <span class="sound">snare</span>
+    </div>
+    <div data-key="12" class="key">
+      <span class="pad"></span>
+      <span class="sound">tom</span>
+    </div>
+    <div data-key="25" class="key">
+      <span class="pad"></span>
+      <span class="sound">clap</span>
+    </div>
+    <div data-key="26" class="key">
+      <span class="pad"></span>
+      <span class="sound">hihat</span>
+    </div>
+    <div data-key="27" class="key">
+      <span class="pad"></span>
+      <span class="sound">openhat</span>
+    </div>
+    <div data-key="28" class="key">
+      <span class="pad"></span>
+      <span class="sound">ride</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>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
+  <script src="js/lib/p5.sound.js"></script>
+  <script src="js/lib/p5.midi.js"></script>
+  <script src="js/drums.js"></script>
+
+
+
+</body>
+</html>
diff --git a/js/drums.js b/js/drums.js
@@ -0,0 +1,102 @@
+
+var mySketch = function(myDrums) {
+
+  let padRange = [9,10,11,12,25,26,27,28];
+  var padNumber = 9;
+  var indPadItem;
+  var padWidth = 100;
+  var padHeight = 100;
+  var padX = 50;
+  var padY = 50;
+  var amplitude;
+  var boom;
+  var volumeBoom;
+
+
+
+  myDrums.preload = function () {
+    boom = myDrums.loadSound('sounds/Broke_For_Free_-_01_-_As_Colorful_As_Ever.mp3');
+  }
+
+  p5.midi.onInput = function (event) {
+    myDrums.clear();
+    console.dir(event);
+    myDrums.playSound();
+    //Drums.volumeControl();
+  }
+
+  myDrums.setup = function (event) {
+    var myCanvas = myDrums.createCanvas(padWidth, padHeight, padX, padY);
+    //myDrums.background(153);
+    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);
+
+    function removeTransition(event) {
+      if (event.propertyName !== 'transform') return;
+      this.classList.remove('playing');
+    }
+
+    console.log(boom);
+
+    myDrums.amplitude = new p5.Amplitude();
+    boom.setVolume(0.5);
+    //myDrums.amplitude.smooth(0.9);
+  }
+
+  myDrums.draw = function () {
+    myDrums.background(0);
+    myDrums.fill(255);
+    var level = myDrums.amplitude.getLevel();
+    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 => {
+    });
+
+    //console.log(pads);
+
+    myDrums.textFont('sans-serif', 24);
+    myDrums.textWidth(padWidth);
+    myDrums.textAlign(myDrums.LEFT, myDrums.TOP);
+    myDrums.fill(255, 255, 255);
+    myDrums.strokeWeight(0);
+    myDrums.text(padNumber, padX, padY);
+
+    // trigger sound on pad down only (127)
+    if (event.data[2] == 127) {
+      if (!audio) return;
+      audio.currentTime = 0;
+      audio.play();
+      key.classList.add('playing');
+    }
+
+  }
+
+  myDrums.volumeControl = function () {
+    const volume = (event.data[2]);
+    console.log('amplitude ' + amplitude);
+    console.log('volume ' + volume);
+
+    // trigger sound on pad down only (127)
+    if (event.data[2] <= 127) {
+
+
+    }
+
+  }
+
+}
+
+var midiDrums = new p5(mySketch, 'canvas');
+
diff --git a/js/lib/jquery-2.2.4.min.js b/js/lib/jquery-2.2.4.min.js