Adds first wave of effects

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

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);

      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');

      this._bindEvents();
    },

    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 {
          this.record();
        }
      }.bind(this))

      this.clearButton.on('click', function () {
        if (!this.recording) {
          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) {
      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);
    },

    _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 ||
                     navigator.mozGetUserMedia ||
                     navigator.msGetUserMedia).bind(navigator)
  }
});