Adds first wave of effects

diff --git a/jekyll/js/unlimited_pizza/pepperoni.js b/jekyll/js/unlimited_pizza/pepperoni.js
index d8742434015839e200d4dab56fa8d16dc6618a3a..58bcc5f29cfc7d77024f5c6893792264454f79b2 100644 (file)
--- a/jekyll/js/unlimited_pizza/pepperoni.js
+++ b/jekyll/js/unlimited_pizza/pepperoni.js
@@ -9,6 +9,12 @@ Class(UnlimitedPizza, "Pepperoni").inherits(Widget)({
     <a class="record-clear">X</a> \
   </div> \
   <audio class="record-preview" controls></audio> \
+  <div class="filter-switches"> \
+    <input class="filter-switch" name="bandpass-filter" type="checkbox" /> <label for="bandpass-filter">Band Pass</label> \
+    <input class="filter-switch" name="hipass-filter" type="checkbox" /> <label for="hipass-filter">Hi Pass</label> \
+    <input class="filter-switch" name="lopass-filter" type="checkbox" /> <label for="lopass-filter">Lo Pass</label> \
+    <input class="filter-switch" name="distort-filter" type="checkbox" /> <label for="distort-filter">Distort</label> \
+  </div> \
 </div> \
   ',
   PAUSE : '&#9616;&#9616;',
@@ -19,6 +25,13 @@ Class(UnlimitedPizza, "Pepperoni").inherits(Widget)({
     source : null,
     recorder : null,
     context : null,
+    _delayNode : null,
+    _bandPassFilterNode : null,
+    _hiPassFilterNode : null,
+    _loPassFilterNode : null,
+    _convolverNode : null,
+    _distortionNode : null,
+    _activatedNodes : null,
     workerPath : '/js/vendor/recorderjs/recorderWorker.js',
     init : function init(config) {
       Widget.prototype.init.call(this, config);
@@ -27,6 +40,33 @@ Class(UnlimitedPizza, "Pepperoni").inherits(Widget)({
         this.context = new (window.AudioContext || window.webkitAudioContext)();
       }
 
+      this._delayNode = this.context.createDelay(1.0);
+      this._bandPassFilterNode = this.context.createBiquadFilter();
+      this._hiPassFilterNode = this.context.createBiquadFilter();
+      this._loPassFilterNode = this.context.createBiquadFilter();
+      this._convolverNode = this.context.createConvolver();
+      this._distortionNode = this.context.createWaveShaper();
+
+      this._distortionNode.curve = this._generateDistortion(400);
+      this._distortionNode.oversample = '4x';
+
+      this._activatedNodes = [];
+
+      // config lo pass
+      this._loPassFilterNode.type = "lowpass";
+      this._loPassFilterNode.frequency.value = 1000;
+      this._loPassFilterNode.gain.value = 25;
+
+      // config hi pass
+      this._hiPassFilterNode.type = "highpass";
+      this._hiPassFilterNode.frequency.value = 3000;
+      this._hiPassFilterNode.gain.value = 25;
+
+      // config band pass
+      this._bandPassFilterNode.type = "bandpass";
+      this._bandPassFilterNode.frequency.value = 2000;
+      this._bandPassFilterNode.gain.value = 25;
+
       if (!this.source) {
         this._getUserMedia({
           audio : true
@@ -40,6 +80,7 @@ Class(UnlimitedPizza, "Pepperoni").inherits(Widget)({
       this.audioElement = this.element.find('audio');
       this.progressBarContainer = this.element.find('.record-progress-bar-container');
       this.progressBar = this.element.find('.record-progress-bar');
+      this.switches = this.element.find('.filter-switch');
 
       this._bindEvents();
     },
@@ -91,6 +132,8 @@ Class(UnlimitedPizza, "Pepperoni").inherits(Widget)({
     },
 
     _bindEvents : function bindEvents() {
+      var pepperoni = this;
+
       this.controlButton.on('click', function () {
         if (this.recording) {
           this.stop();
@@ -104,6 +147,63 @@ Class(UnlimitedPizza, "Pepperoni").inherits(Widget)({
           this.clear();
         }
       }.bind(this))
+
+      this.switches.on('change', function (ev) {
+        if (!pepperoni.source) {
+          this.checked = false;
+          return false;
+        }
+        switch (this.name) {
+          case 'delay-filter':
+            if (this.checked) {
+              pepperoni._addNode(pepperoni._delayNode);
+            } else {
+              pepperoni._removeNode(pepperoni._delayNode);
+            }
+            break;
+
+          case 'hipass-filter':
+            if (this.checked) {
+              pepperoni._addNode(pepperoni._hiPassFilterNode);
+            } else {
+              pepperoni._removeNode(pepperoni._hiPassFilterNode);
+            }
+            break;
+
+          case 'bandpass-filter':
+            if (this.checked) {
+              pepperoni._addNode(pepperoni._bandPassFilterNode);
+            } else {
+              pepperoni._removeNode(pepperoni._bandPassFilterNode);
+            }
+            break;
+
+          case 'lopass-filter':
+            if (this.checked) {
+              pepperoni._addNode(pepperoni._loPassFilterNode);
+            } else {
+              pepperoni._removeNode(pepperoni._loPassFilterNode);
+            }
+            break;
+
+          case 'reverb-filter':
+            if (this.checked) {
+              pepperoni._addNode(pepperoni._convolverNode);
+            } else {
+              pepperoni._removeNode(pepperoni._convolverNode);
+            }
+            break;
+
+          case 'distort-filter':
+            if (this.checked) {
+              pepperoni._addNode(pepperoni._distortionNode);
+            } else {
+              pepperoni._removeNode(pepperoni._distortionNode);
+            }
+
+            break;
+        }
+      });
     },
 
     _onRecording : function _onRecording(buffer) {
@@ -143,6 +243,72 @@ Class(UnlimitedPizza, "Pepperoni").inherits(Widget)({
       }.bind(this));
     },
 
+    _addNode : function _addNode(node) {
+      var i;
+
+      i = this._activatedNodes.length;
+
+      this._activatedNodes.push(node);
+
+      if (i === 0) {
+        this.source.disconnect();
+        this.source.connect(node);
+      } else {
+        this._activatedNodes[i - 1].disconnect();
+        this._activatedNodes[i - 1].connect(node);
+      }
+
+      node.connect(this.recorder.node);
+      this.recorder.context = node.context;
+      this.recorder.node.connect(this.recorder.context.destination)
+
+      console.log("Adding: ", node);
+    },
+
+    _removeNode : function _removeNode(node) {
+      var i;
+
+      i = this._activatedNodes.indexOf(node);
+
+      node.disconnect();
+
+      if (i === 0 && i + 1 === this._activatedNodes.length) {
+        // It was the only one, connect source to recorder.
+        this.source.disconnect();
+        this.source.connect(this.recorder.node);
+      } else if (i === 0) {
+        // Normal 0 case, connect source to node. Recorder stays the same
+        this.source.disconnect();
+        this.source.connect(this._activatedNodes[i+1]);
+      } else if (i + 1 === this._activatedNodes.length) {
+        // It's not the 0 case, but we need to reconnect to recorder.
+        this._activatedNodes[i - 1].disconnect();
+        this._activatedNodes[i - 1].connect(this.recorder.node);
+      } else {
+        // Normal case, connect previous node to node
+        this._activatedNodes[i - 1].disconnect();
+        this._activatedNodes[i - 1].connect(this._activatedNodes[i + 1]);
+      }
+
+      this._activatedNodes.splice(i, 1);
+
+      console.log("Removing: ", node);
+    },
+
+    _generateDistortion : function generateDistortion(amount) {
+      var k = typeof amount === 'number' ? amount : 50,
+        n_samples = 44100,
+        curve = new Float32Array(n_samples),
+        deg = Math.PI / 180,
+        i = 0,
+        x;
+      for ( ; i < n_samples; ++i ) {
+          x = i * 2 / n_samples - 1;
+          curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+        }
+      return curve;
+    },
+
     // Normalize get user media
     _getUserMedia : (navigator.getUserMedia ||
                      navigator.webkitGetUserMedia ||