git.r.bdr.sh - rbdr/r.bdr.sh/blob - jekyll/js/unlimited_pizza/pepperoni.js

   1 Class(UnlimitedPizza, "Pepperoni").inherits(Widget)({
   2   INNER_HTML : ' \
   3 <a class="record-button">&#11044</a> \
   4 <div class="record-info"> \
   5   <div class="record-progress"> \
   6     <div class="record-progress-bar-container"> \
   7       <div class="record-progress-bar"></div> \
   8     </div> \
   9     <a class="record-clear">X</a> \
  10   </div> \
  11   <audio class="record-preview" controls></audio> \
  12 </div> \
  13   ',
  14   PAUSE : '&#9616;&#9616;',
  15   RECORD : '&#11044;',
  16   prototype : {
  17     maxSize : 1048576,
  18     recording : false,
  19     source : null,
  20     recorder : null,
  21     context : null,
  22     workerPath : '/js/vendor/recorderjs/recorderWorker.js',
  23     init : function init(config) {
  24       Widget.prototype.init.call(this, config);
  25
  26       if (!this.context) {
  27         this.context = new (window.AudioContext || window.webkitAudioContext)();
  28       }
  29
  30       if (!this.source) {
  31         this._getUserMedia({
  32           audio : true
  33         }, this._onUserMedia.bind(this), this._onUserMediaError.bind(this))
  34       }
  35
  36       this.element.html(this.constructor.INNER_HTML);
  37
  38       this.controlButton = this.element.find('.record-button');
  39       this.clearButton = this.element.find('.record-clear');
  40       this.audioElement = this.element.find('audio');
  41       this.progressBarContainer = this.element.find('.record-progress-bar-container');
  42       this.progressBar = this.element.find('.record-progress-bar');
  43
  44       this._bindEvents();
  45     },
  46
  47     record : function record() {
  48       if (this.recorder && !this.recording) {
  49         this._canRecord(function handleCanRecord(canRecord) {
  50           if (canRecord) {
  51             this.recording = true;
  52             this.controlButton.addClass('recording')
  53             this.controlButton.html(this.constructor.PAUSE);
  54             this._interval = setInterval(this._onRecordCheck.bind(this), 100);
  55             this.recorder.record();
  56           }
  57         }.bind(this));
  58       }
  59     },
  60
  61     stop : function stop() {
  62       if (this.recorder && this.recording) {
  63         this.recording = false;
  64         this.controlButton.removeClass('recording')
  65         this.controlButton.html(this.constructor.RECORD);
  66         clearInterval(this._interval);
  67         this.recorder.stop();
  68         this.recorder.exportWAV();
  69       }
  70     },
  71
  72     clear : function clear() {
  73       if (this.recorder) {
  74         this.progressBar.width(0);
  75         this.audioElement.attr('src', '');
  76         this.audioElement[0].load();
  77         this.recorder.clear()
  78       }
  79     },
  80
  81     finalize : function finalize(callback) {
  82       if (this.recorder) {
  83         this.recorder.exportWAV(callback);
  84       }
  85     },
  86
  87     getBuffer : function getBuffer(callback) {
  88       if (this.recorder) {
  89         this.recorder.getBuffer(callback);
  90       }
  91     },
  92
  93     _bindEvents : function bindEvents() {
  94       this.controlButton.on('click', function () {
  95         if (this.recording) {
  96           this.stop();
  97         } else {
  98           this.record();
  99         }
 100       }.bind(this))
 101
 102       this.clearButton.on('click', function () {
 103         if (!this.recording) {
 104           this.clear();
 105         }
 106       }.bind(this))
 107     },
 108
 109     _onRecording : function _onRecording(buffer) {
 110       this._buffer = buffer;
 111
 112       this.audioElement.attr('src', URL.createObjectURL(buffer));
 113       this.audioElement[0].load();
 114     },
 115
 116     _onUserMedia : function _onUserMedia(localMediaStream) {
 117       this.source = this.context.createMediaStreamSource(localMediaStream);
 118       this.recorder = new Recorder(this.source, {
 119         workerPath : this.workerPath,
 120         callback : this._onRecording.bind(this)
 121       });
 122     },
 123
 124     _onUserMediaError : function _onUserMediaError(error) {
 125       console.log("Something went wrong", error);
 126       this.disable();
 127     },
 128
 129     _onRecordCheck : function _onRecordCheck() {
 130       this._canRecord(function (canRecord, bufferSize) {
 131         var width =  bufferSize * this.progressBarContainer.width() / this.maxSize;
 132         this.progressBar.width(width);
 133         if (!canRecord) {
 134           this.stop();
 135         }
 136       }.bind(this));
 137     },
 138
 139     _canRecord : function _canRecord(callback) {
 140       this.recorder.getBuffer(function getBuffer(buffer) {
 141         var bufferSize = buffer[0].length + buffer[1].length;
 142          callback && callback(bufferSize <= this.maxSize, bufferSize);
 143       }.bind(this));
 144     },
 145
 146     // Normalize get user media
 147     _getUserMedia : (navigator.getUserMedia ||
 148                      navigator.webkitGetUserMedia ||
 149                      navigator.mozGetUserMedia ||
 150                      navigator.msGetUserMedia).bind(navigator)
 151   }
 152 });