Remove unused multimedia

[rbdr/r.bdr.sh] / jekyll / js / unlimited_pizza / pepperoni.js

diff --git a/jekyll/js/unlimited_pizza/pepperoni.js b/jekyll/js/unlimited_pizza/pepperoni.js
index 58bcc5f29cfc7d77024f5c6893792264454f79b2..9235794945df4b6a32c59b391491c20065d30d1b 100644 (file)
--- a/jekyll/js/unlimited_pizza/pepperoni.js
+++ b/jekyll/js/unlimited_pizza/pepperoni.js
@@ -1,318 +1,368 @@
-Class(UnlimitedPizza, "Pepperoni").inherits(Widget)({
-  INNER_HTML : ' \
-<a class="record-button">&#11044</a> \
-<div class="record-info"> \
-  <div class="record-progress"> \
-    <div class="record-progress-bar-container"> \
-      <div class="record-progress-bar"></div> \
-    </div> \
-    <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;',
-  RECORD : '&#11044;',
-  prototype : {
-    maxSize : 1048576,
-    recording : false,
-    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);
-
-      if (!this.context) {
-        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
-        }, this._onUserMedia.bind(this), this._onUserMediaError.bind(this))
-      }
-
-      this.element.html(this.constructor.INNER_HTML);
+'use strict';

 
 

-      this.controlButton = this.element.find('.record-button');
-      this.clearButton = this.element.find('.record-clear');
-      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');
+const internals = {

 
 

-      this._bindEvents();
+  config: {
+    convolverNode: {
+      requestMethod: 'GET',
+      requestLocation: '/reverb.ogg',
+      responseType: 'arraybuffer'

     },
     },

+    distortionNode: {
+      amount: 400
+    }
+  },
+
+  kTemplate: `<a class="record-button">Record.</a>
+<div class="record-info">
+  <div class="record-progress">
+    <div class="record-progress-bar-container">
+      <div class="record-progress-bar"></div>
+    </div>
+    <a class="record-clear">Clear recording.</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="reverb-filter" type="checkbox" /> <label for="reverb-filter">Reverb</label>
+    <input class="filter-switch" name="distort-filter" type="checkbox" /> <label for="distort-filter">Distort</label>
+  </div>
+</div>`,
+  kPauseLabel : 'Pause.',
+  kRecordLabel : 'Record.',
+};
+
+const Pepperoni = class Pepperoni {
+  constructor() {
+
+    const context = new AudioContext();
+
+    const nodes = this._createNodes(context);
+
+    this._activatedNodes = [];
+  },
+
+  _createNodes(context) {
+
+    const delayNode = context.createDelay(1.0);
+
+    const convolverNode = context.createConvolver();
+    this._initializeConvolverNode(convolverNode);
+
+    const loPassFilterNode = context.createBiquadFilter();
+    loPassFilterNode.type = 'lowpass';
+    loPassFilterNode.frequency.value = 1000;
+    loPassFilterNode.gain.value = 25;
+
+    const hiPassFilterNode = context.createBiquadFilter();
+    hiPassFilterNode.type = 'highpass';
+    hiPassFilterNode.frequency.value = 3000;
+    hiPassFilterNode.gain.value = 25;
+
+    const bandPassFilterNode = context.createBiquadFilter();
+    bandPassFilterNode.type = 'bandpass';
+    bandPassFilterNode.frequency.value = 2000;
+    bandPassFilterNode.gain.value = 25;
+
+    const distortionNode = context.createWaveShaper();
+    distortionNode.curve = this._generateDistortion(400);
+    distortionNode.oversample = '4x';
+  }

 
 

-    record : function record() {
-      if (this.recorder && !this.recording) {
-        this._canRecord(function handleCanRecord(canRecord) {
-          if (canRecord) {
-            this.recording = true;
-            this.controlButton.addClass('recording')
-            this.controlButton.html(this.constructor.PAUSE);
-            this._interval = setInterval(this._onRecordCheck.bind(this), 100);
-            this.recorder.record();
-          }
-        }.bind(this));
-      }
-    },
+  // Generates a wave to be used with the distortion wave shaper node

 
 

-    stop : function stop() {
-      if (this.recorder && this.recording) {
-        this.recording = false;
-        this.controlButton.removeClass('recording')
-        this.controlButton.html(this.constructor.RECORD);
-        clearInterval(this._interval);
-        this.recorder.stop();
-        this.recorder.exportWAV();
-      }
-    },
+  _generateDistortion(amount = 50) {

 
 

-    clear : function clear() {
-      if (this.recorder) {
-        this.progressBar.width(0);
-        this.audioElement.attr('src', '');
-        this.audioElement[0].load();
-        this.recorder.clear()
-      }
-    },
+    const sampleRate = 44100;
+    const curve = new Float32Array(sampleRate);
+    const angle = Math.PI / 180;

 
 

-    finalize : function finalize(callback) {
-      if (this.recorder) {
-        this.recorder.exportWAV(callback);
-      }
-    },
+    for (let i = 0; i < sampleRate; ++i) {
+      const x = i * 2 / sampleRate - 1;
+      curve[i] = ( 3 + amount ) * x * 20 * angle / ( Math.PI + amount * Math.abs(x) );
+    }

 
 

-    getBuffer : function getBuffer(callback) {
-      if (this.recorder) {
-        this.recorder.getBuffer(callback);
-      }
-    },
+    return curve;
+  },

 
 

-    _bindEvents : function bindEvents() {
-      var pepperoni = this;
+  // Initializes a convolver node by requesting the reverb sound,
+  // decoding it, and attaching it

 
 

-      this.controlButton.on('click', function () {
-        if (this.recording) {
-          this.stop();
-        } else {
-          this.record();
-        }
-      }.bind(this))
+  _initializeConvolverNode(node) {

 
 

-      this.clearButton.on('click', function () {
-        if (!this.recording) {
-          this.clear();
-        }
-      }.bind(this))
+    const request = new XMLHttpRequest();
+    request.open(config.convolverNode.requestMethod, config.convolverNode.requestLocation);
+    request.responseType = config.convolverNode.responseType;
+    request.addEventListener('load', (event) => {

 
 

-      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;
-        }
+      node.context.decodeAudioData(event.target.response, (buffer) => {
+
+        node.buffer = buffer;

       });
       });

-    },
+    });
+    request.send();
+  }

 
 

-    _onRecording : function _onRecording(buffer) {
-      this._buffer = buffer;
+  // Handles the XHR response to the reverb file

 
 

-      this.audioElement.attr('src', URL.createObjectURL(buffer));
-      this.audioElement[0].load();
-    },

 
 

-    _onUserMedia : function _onUserMedia(localMediaStream) {
-      this.source = this.context.createMediaStreamSource(localMediaStream);
-      this.recorder = new Recorder(this.source, {
-        workerPath : this.workerPath,
-        callback : this._onRecording.bind(this)
-      });
-    },

 
 

-    _onUserMediaError : function _onUserMediaError(error) {
-      console.log("Something went wrong", error);
-      this.disable();
-    },
+    if (!this.source) {
+      this._getUserMedia({
+        audio : true
+      }, this._onUserMedia.bind(this), this._onUserMediaError.bind(this))
+    }

 
 

-    _onRecordCheck : function _onRecordCheck() {
-      this._canRecord(function (canRecord, bufferSize) {
-        var width =  bufferSize * this.progressBarContainer.width() / this.maxSize;
-        this.progressBar.width(width);
-        if (!canRecord) {
-          this.stop();
-        }
-      }.bind(this));
-    },
+    this.element.html(this.constructor.INNER_HTML);

 
 

-    _canRecord : function _canRecord(callback) {
-      this.recorder.getBuffer(function getBuffer(buffer) {
-        var bufferSize = buffer[0].length + buffer[1].length;
-         callback && callback(bufferSize <= this.maxSize, bufferSize);
-      }.bind(this));
-    },
+    this.controlButton = this.element.find('.record-button');
+    this.clearButton = this.element.find('.record-clear');
+    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');

 
 

-    _addNode : function _addNode(node) {
-      var i;
+    this._bindEvents();
+};

 
 

-      i = this._activatedNodes.length;
+const Pepperoni.prototype = {

 
 

-      this._activatedNodes.push(node);
+  _createNodes() {
+  
+  }

 
 

-      if (i === 0) {
-        this.source.disconnect();
-        this.source.connect(node);
+  maxSize : 1048576,
+  recording : false,
+  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) {
+  },
+
+  record : function record() {
+    if (this.recorder && !this.recording) {
+      this._canRecord(function handleCanRecord(canRecord) {
+        if (canRecord) {
+          this.recording = true;
+          this.controlButton.addClass('recording')
+          this.controlButton.html(this.constructor.PAUSE);
+          this._interval = setInterval(this._onRecordCheck.bind(this), 100);
+          this.recorder.record();
+        }
+      }.bind(this));
+    }
+  },
+
+  stop : function stop() {
+    if (this.recorder && this.recording) {
+      this.recording = false;
+      this.controlButton.removeClass('recording')
+      this.controlButton.html(this.constructor.RECORD);
+      clearInterval(this._interval);
+      this.recorder.stop();
+      this.recorder.exportWAV();
+    }
+  },
+
+  clear : function clear() {
+    if (this.recorder) {
+      this.progressBar.width(0);
+      this.audioElement.attr('src', '');
+      this.audioElement[0].load();
+      this.recorder.clear()
+    }
+  },
+
+  finalize : function finalize(callback) {
+    if (this.recorder) {
+      this.recorder.exportWAV(callback);
+    }
+  },
+
+  getBuffer : function getBuffer(callback) {
+    if (this.recorder) {
+      this.recorder.getBuffer(callback);
+    }
+  },
+
+  _bindEvents : function bindEvents() {
+    var pepperoni = this;
+
+    this.controlButton.on('click', function () {
+      if (this.recording) {
+        this.stop();

       } else {
       } else {

-        this._activatedNodes[i - 1].disconnect();
-        this._activatedNodes[i - 1].connect(node);
+        this.record();

       }
       }

+    }.bind(this))

 
 

-      node.connect(this.recorder.node);
-      this.recorder.context = node.context;
-      this.recorder.node.connect(this.recorder.context.destination)
-
-      console.log("Adding: ", node);
-    },
+    this.clearButton.on('click', function () {
+      if (!this.recording) {
+        this.clear();
+      }
+    }.bind(this))

 
 

-    _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.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;

 
 

-      this._activatedNodes.splice(i, 1);
+        case 'hipass-filter':
+          if (this.checked) {
+            pepperoni._addNode(pepperoni._hiPassFilterNode);
+          } else {
+            pepperoni._removeNode(pepperoni._hiPassFilterNode);
+          }
+          break;

 
 

-      console.log("Removing: ", node);
-    },
+        case 'bandpass-filter':
+          if (this.checked) {
+            pepperoni._addNode(pepperoni._bandPassFilterNode);
+          } else {
+            pepperoni._removeNode(pepperoni._bandPassFilterNode);
+          }
+          break;

 
 

-    _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;
-    },
+        case 'lopass-filter':
+          if (this.checked) {
+            pepperoni._addNode(pepperoni._loPassFilterNode);
+          } else {
+            pepperoni._removeNode(pepperoni._loPassFilterNode);
+          }
+          break;

 
 

-    // Normalize get user media
-    _getUserMedia : (navigator.getUserMedia ||
-                     navigator.webkitGetUserMedia ||
-                     navigator.mozGetUserMedia ||
-                     navigator.msGetUserMedia).bind(navigator)
-  }
+        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) {
+    this._buffer = buffer;
+
+    this.audioElement.attr('src', URL.createObjectURL(buffer));
+    this.audioElement[0].load();
+  },
+
+  _onUserMedia : function _onUserMedia(localMediaStream) {
+    this.source = this.context.createMediaStreamSource(localMediaStream);
+    this.recorder = new Recorder(this.source, {
+      workerPath : this.workerPath,
+      callback : this._onRecording.bind(this)
+    });
+  },
+
+  _onUserMediaError : function _onUserMediaError(error) {
+    console.log("Something went wrong", error);
+    this.disable();
+  },
+
+  _onRecordCheck : function _onRecordCheck() {
+    this._canRecord(function (canRecord, bufferSize) {
+      var width =  bufferSize * this.progressBarContainer.width() / this.maxSize;
+      this.progressBar.width(width);
+      if (!canRecord) {
+        this.stop();
+      }
+    }.bind(this));
+  },
+
+  _canRecord : function _canRecord(callback) {
+    this.recorder.getBuffer(function getBuffer(buffer) {
+      var bufferSize = buffer[0].length + buffer[1].length;
+       callback && callback(bufferSize <= this.maxSize, bufferSize);
+    }.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);
+  },
+
+  // Normalize get user media
+  _getUserMedia : (navigator.getUserMedia ||
+                   navigator.webkitGetUserMedia ||
+                   navigator.mozGetUserMedia ||
+                   navigator.msGetUserMedia).bind(navigator)
+}

 });
 });