@lls/lls-audio 0.0.58 → 0.0.60

package/package.json

@@ -1,37 +1,39 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "main": "index.js",
   "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
-    "css-loader": "^0.26.1",
-    "style-loader": "^0.13.1",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "babel-cli": "^6.9.0",
-    "superheroes": "^1.0.0",
-    "conventional-changelog": "^1.1.0",
-    "conventional-changelog-cli": "^1.2.0",
-    "@kadira/storybook-deployer": "^1.0.0",
-    "release-it": "^2.4.0",
+    "@kadira/storybook": "2.21.0",
+    "@kadira/storybook-deployer": "1.0.0",
+    "@lls/lls-icons": "*",
+    "@lls/lls-ui": "*",
+    "aphrodite": "0.5.0",
+    "babel-cli": "6.9.0",
+    "babel-preset-es2015": "6.3.13",
+    "babel-preset-react": "6.3.13",
+    "babel-preset-stage-0": "6.3.13",
+    "conventional-changelog": "1.1.0",
+    "conventional-changelog-cli": "1.2.0",
+    "css-loader": "0.26.1",
     "react": "15.3.1",
     "react-dom": "15.3.1",
-    "@lls/lls-icons": "1.0.49"
+    "release-it": "2.4.0",
+    "style-loader": "0.13.1",
+    "superheroes": "1.0.0"
   },
   "dependencies": {
-    "@lls/lls-ui": "0.1.33",
-    "aphrodite": "^1.1.0",
-    "is_js": "^0.9.0",
-    "merge-audio-buffers": "^1.0.0",
-    "msr": "^1.3.4",
-    "react-input-range": "^0.9.3",
-    "waveform-data": "^2.0.0"
+    "hark": "1.1.5",
+    "inline-worker": "1.1.0",
+    "is_js": "0.9.0",
+    "react-input-range": "0.9.3",
+    "waveform-data": "2.0.0"
   },
   "peerDependencies": {
-    "react": "15.3.1",
-    "react-dom": "15.3.1",
-    "@lls/lls-icons": "1.0.49"
+    "@lls/lls-icons": "*",
+    "@lls/lls-ui": "*",
+    "aphrodite": "0.5.0",
+    "react": "*",
+    "react-dom": "*"
   },
   "engines": {
     "node": ">=0.12.0"

package/player/Play.js

@@ -18,19 +18,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var generateStyles = function generateStyles(_ref) {
-  var _play_button_wrapper;
-
   var size = _ref.size,
       invert = _ref.invert,
       transitionDuration = _ref.transitionDuration;
   return _noImportant.StyleSheet.create({
-    play_button_wrapper: (_play_button_wrapper = {
+    play_button_wrapper: {
       height: '100%',
-      width: size * 2.5
-    }, _defineProperty(_play_button_wrapper, 'height', size * 2.5), _defineProperty(_play_button_wrapper, 'color', '#6d6d6d'), _defineProperty(_play_button_wrapper, 'textAlign', 'center'), _defineProperty(_play_button_wrapper, 'boxSizing', 'border-box'), _defineProperty(_play_button_wrapper, 'backgroundColor', invert ? 'white' : _colors.BLUE), _defineProperty(_play_button_wrapper, 'borderRadius', '50%'), _defineProperty(_play_button_wrapper, 'display', 'flex'), _defineProperty(_play_button_wrapper, 'alignItems', 'center'), _defineProperty(_play_button_wrapper, 'justifyContent', 'center'), _defineProperty(_play_button_wrapper, 'cursor', 'pointer'), _play_button_wrapper),
+      width: size * 2.5,
+      height: size * 2.5,
+      color: '#6d6d6d',
+      textAlign: 'center',
+      boxSizing: 'border-box',
+      backgroundColor: invert ? 'white' : _colors.BLUE,
+      borderRadius: '50%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer'
+    },
     play_button: {
       'height': size,
       'width': size,

package/recorder/AudioWorker.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var AudioWorker = function AudioWorker(self) {
+  var recLength = 0;
+  var recBuffers = [];
+  var audioBlob = null;
+
+  self.onmessage = function (e) {
+    var mergeBuffers = function mergeBuffers(recBuffers, recLength) {
+      var result = new Float32Array(recLength);
+      var offset = 0;
+      for (var i = 0; i < recBuffers.length; i++) {
+        result.set(recBuffers[i], offset);
+        offset += recBuffers[i].length;
+      }
+      return result;
+    };
+
+    var appendBuffer = function appendBuffer(timestamp, inputBuffer) {
+      for (var channel = 0; channel < inputBuffer.length; channel++) {
+        if (!recBuffers[channel]) recBuffers[channel] = [];
+        recBuffers[channel].push({ timestamp: timestamp, data: inputBuffer[channel], length: inputBuffer[channel].length });
+      }
+      recLength += inputBuffer[0].length;
+    };
+
+    function interleave(inputL, inputR) {
+      var length = inputL.length + inputR.length;
+      var result = new Float32Array(length);
+
+      var index = 0;
+      var inputIndex = 0;
+
+      while (index < length) {
+        result[index++] = inputL[inputIndex];
+        result[index++] = inputR[inputIndex];
+        inputIndex++;
+      }
+      return result;
+    }
+
+    var writeString = function writeString(view, offset, string) {
+      for (var i = 0; i < string.length; i++) {
+        view.setUint8(offset + i, string.charCodeAt(i));
+      }
+    };
+
+    var floatTo16BitPCM = function floatTo16BitPCM(output, offset, input) {
+      for (var i = 0; i < input.length; i++, offset += 2) {
+        var s = Math.max(-1, Math.min(1, input[i]));
+        output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+      }
+    };
+
+    var encodeWAV = function encodeWAV(samples) {
+      var buffer = new ArrayBuffer(44 + samples.length * 2);
+      var view = new DataView(buffer);
+
+      /* RIFF identifier */
+      writeString(view, 0, 'RIFF');
+      /* RIFF chunk length */
+      view.setUint32(4, 36 + samples.length * 2, true);
+      /* RIFF type */
+      writeString(view, 8, 'WAVE');
+      /* format chunk identifier */
+      writeString(view, 12, 'fmt ');
+      /* format chunk length */
+      view.setUint32(16, 16, true);
+      /* sample format (raw) */
+      view.setUint16(20, 1, true);
+      /* channel count */
+      view.setUint16(22, recBuffers.length, true);
+      /* sample rate */
+      view.setUint32(24, 44100, true);
+      /* byte rate (sample rate * block align) */
+      view.setUint32(28, 44100 * 4, true);
+      /* block align (channel count * bytes per sample) */
+      view.setUint16(32, recBuffers.length * 2, true);
+      /* bits per sample */
+      view.setUint16(34, 16, true);
+      /* data chunk identifier */
+      writeString(view, 36, 'data');
+      /* data chunk length */
+      view.setUint32(40, samples.length * 2, true);
+
+      floatTo16BitPCM(view, 44, samples);
+
+      return view;
+    };
+
+    var exportWAV = function exportWAV(beginning, end) {
+      var buffers = [];
+      for (var channel = 0; channel < recBuffers.length; channel++) {
+        var length = 0;
+        var filtredRecBuffers = recBuffers[channel].filter(function (buffer) {
+          return buffer.timestamp >= beginning - 1000 && buffer.timestamp <= end;
+        }).map(function (buffer) {
+          length += buffer.length;
+          return buffer.data;
+        });
+        buffers.push(mergeBuffers(filtredRecBuffers, length));
+      }
+      var interleaved = recBuffers.length === 2 ? interleave(buffers[0], buffers[1]) : buffers[0];
+      var dataview = encodeWAV(interleaved);
+      audioBlob = new Blob([dataview], { type: 'audio/wav' });
+    };
+
+    switch (e.data.command) {
+      case 'append':
+        appendBuffer(e.data.timestamp, e.data.inputBuffer);
+        var buffers = [];
+        for (var channel = 0; channel < recBuffers.length; channel++) {
+          buffers.push(mergeBuffers(recBuffers[channel], recLength));
+        }
+        postMessage({ command: 'send_buffers', buffers: recBuffers });
+        break;
+      case 'exportWAV':
+        exportWAV(e.data.beginning, e.data.end);
+        postMessage({ command: 'send_WAV', audioBlob: audioBlob });
+        break;
+      case 'clean':
+        recLength = 0;
+        recBuffers = [];
+        audioBlob = null;
+        break;
+    }
+  };
+};
+
+exports.default = AudioWorker;

package/recorder/DesktopRecorder.js

@@ -10,19 +10,27 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _msr = require('msr');
+var _CustomWave = require('../player/CustomWave');
 
-var _msr2 = _interopRequireDefault(_msr);
-
-var _Wave = require('../player/Wave');
-
-var _Wave2 = _interopRequireDefault(_Wave);
+var _CustomWave2 = _interopRequireDefault(_CustomWave);
 
 var _audioContext = require('../utils/audioContext');
 
 var _audioContext2 = _interopRequireDefault(_audioContext);
 
-var _audio = require('../utils/audio');
+var _mediaDevices = require('../utils/mediaDevices');
+
+var _hark = require('hark');
+
+var _hark2 = _interopRequireDefault(_hark);
+
+var _inlineWorker = require('inline-worker');
+
+var _inlineWorker2 = _interopRequireDefault(_inlineWorker);
+
+var _AudioWorker = require('./AudioWorker');
+
+var _AudioWorker2 = _interopRequireDefault(_AudioWorker);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -32,112 +40,175 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var INTERVAL = 100;
+
 var audioContext = new _audioContext2.default();
 
-var DesktopRecorder = function (_Component) {
-  _inherits(DesktopRecorder, _Component);
+var initRecorder = function initRecorder(_ref) {
+  var stream = _ref.stream,
+      audioContext = _ref.audioContext,
+      _ref$onAudioProcess = _ref.onAudioProcess,
+      onAudioProcess = _ref$onAudioProcess === undefined ? function () {} : _ref$onAudioProcess;
+
+  var bufferSize = 4096;
+  var numberOfInputChannels = 1; // for google cloud Speech to text, we must have one (and only one) channel
+  var numberOfOutputChannels = 1;
+
+  // creates an audio node from the microphone incoming stream
+  var mediaStream = audioContext.createMediaStreamSource(stream);
+  var recorder = audioContext.createScriptProcessor ? audioContext.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels) : audioContext.createJavaScriptNode(bufferSize, numberOfInputChannels, numberOfOutputChannels);
+
+  recorder.onaudioprocess = onAudioProcess;
+
+  // we connect the recorder with the input stream
+  mediaStream.connect(recorder);
+  recorder.connect(audioContext.destination);
+
+  return recorder;
+};
+
+var initSpeechEvents = function initSpeechEvents(_ref2) {
+  var stream = _ref2.stream,
+      _ref2$onSpeaking = _ref2.onSpeaking,
+      onSpeaking = _ref2$onSpeaking === undefined ? function () {} : _ref2$onSpeaking,
+      _ref2$onStoppedSpeaki = _ref2.onStoppedSpeaking,
+      onStoppedSpeaking = _ref2$onStoppedSpeaki === undefined ? function () {} : _ref2$onStoppedSpeaki,
+      _ref2$onVolumeChange = _ref2.onVolumeChange,
+      onVolumeChange = _ref2$onVolumeChange === undefined ? function () {} : _ref2$onVolumeChange;
+
+  // Try hark
+  var options = {
+    interval: INTERVAL
+  };
+  var speechEvents = (0, _hark2.default)(stream, options);
+
+  speechEvents.on('speaking', onSpeaking);
+  speechEvents.on('stopped_speaking', onStoppedSpeaking);
+  speechEvents.on('volume_change', onVolumeChange);
+
+  return speechEvents;
+};
 
-  function DesktopRecorder(props) {
-    _classCallCheck(this, DesktopRecorder);
+var DesktopAudioRecorder = function (_Component) {
+  _inherits(DesktopAudioRecorder, _Component);
 
-    var _this = _possibleConstructorReturn(this, (DesktopRecorder.__proto__ || Object.getPrototypeOf(DesktopRecorder)).call(this, props));
+  function DesktopAudioRecorder(props) {
+    _classCallCheck(this, DesktopAudioRecorder);
 
-    _this.state = {
-      isRecording: false,
-      recordedData: null
-    };
-    _this.mediaRecorder = null;
-    _this.buffers = [];
+    var _this = _possibleConstructorReturn(this, (DesktopAudioRecorder.__proto__ || Object.getPrototypeOf(DesktopAudioRecorder)).call(this, props));
+
+    _this.recordStart = null;
+    _this.audioBuffer = [];
+    _this.init = _this.init.bind(_this);
+    _this.initStream = _this.initStream.bind(_this);
     return _this;
   }
 
-  _createClass(DesktopRecorder, [{
-    key: 'render',
-    value: function render() {
+  _createClass(DesktopAudioRecorder, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.init(this.props);
+    }
+  }, {
+    key: 'init',
+    value: function init(props) {
       var _this2 = this;
 
-      var _state = this.state,
-          isRecording = _state.isRecording,
-          recordedData = _state.recordedData;
-
-      return _react2.default.createElement(
-        'div',
-        null,
-        'Desktop recorder',
-        isRecording ? _react2.default.createElement(
-          'button',
-          { onClick: function onClick() {
-              return _this2.stopRecording();
-            } },
-          ' stop recording '
-        ) : _react2.default.createElement(
-          'button',
-          { onClick: function onClick() {
-              return _this2.record();
-            } },
-          ' record '
-        ),
-        recordedData ? _react2.default.createElement(_Wave2.default, {
-          width: 500,
-          currentTime: 0,
-          height: 40,
-          isLoading: false,
-          buffer: recordedData }) : null
-      );
+      var _props$onError = props.onError,
+          onError = _props$onError === undefined ? function () {} : _props$onError,
+          _props$onVolumeChange = props.onVolumeChange,
+          onVolumeChange = _props$onVolumeChange === undefined ? function () {} : _props$onVolumeChange,
+          _props$onRecordComple = props.onRecordComplete,
+          onRecordComplete = _props$onRecordComple === undefined ? function () {} : _props$onRecordComple;
+
+
+      (0, _mediaDevices.shimMediaDevices)();
+      window.navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
+        _this2.initStream({
+          stream: stream,
+          onError: onError,
+          onVolumeChange: onVolumeChange,
+          onRecordComplete: onRecordComplete
+        });
+      }).catch(function (err) {
+        onError(err);
+      });
+
+      this.initWorker();
     }
   }, {
-    key: 'record',
-    value: function record() {
+    key: 'initStream',
+    value: function initStream(_ref3) {
       var _this3 = this;
 
-      window.navigator.getUserMedia({ audio: true }, function (stream) {
-        return _this3.onMediaSuccess(stream);
-      }, function (stream) {
-        return _this3.onMediaError(stream);
+      var stream = _ref3.stream,
+          onError = _ref3.onError,
+          _onVolumeChange = _ref3.onVolumeChange,
+          onRecordComplete = _ref3.onRecordComplete;
+
+      // Init recorder
+      var recorder = initRecorder({
+        stream: stream,
+        audioContext: audioContext,
+        onAudioProcess: function onAudioProcess(e) {
+          var inputBuffer = [];
+          for (var channel = 0; channel < e.inputBuffer.numberOfChannels; channel++) {
+            inputBuffer.push(e.inputBuffer.getChannelData(channel));
+          }
+          _this3.worker.postMessage({ command: 'append', timestamp: Date.now(), inputBuffer: inputBuffer });
+        }
       });
-      this.setState({
-        isRecording: true
+
+      // Initialize hark for silence recognition
+      var speechEvents = initSpeechEvents({
+        stream: stream,
+        onStoppedSpeaking: function onStoppedSpeaking() {
+          console.log('stop');
+          try {
+            _this3.worker.postMessage({ command: 'exportWAV', buffers: _this3.audioBuffer, beginning: _this3.recordStart, end: Date.now() });
+            _this3.worker.postMessage({ command: 'clean' });
+            _this3.audioBuffer = [];
+          } catch (e) {
+            onError(e);
+          }
+        },
+        onSpeaking: function onSpeaking() {
+          console.log('start');
+          _this3.recordStart = Date.now() - INTERVAL * 3; // give it a bit of extra time
+        },
+        onVolumeChange: function onVolumeChange(volume) {
+          _onVolumeChange(volume);
+        }
       });
     }
   }, {
-    key: 'onMediaSuccess',
-    value: function onMediaSuccess(stream) {
+    key: 'initWorker',
+    value: function initWorker() {
       var _this4 = this;
 
-      this.mediaRecorder = new _msr2.default(stream);
-      this.mediaRecorder.mimeType = 'audio/wav'; // check this line for audio/wav
-      this.mediaRecorder.bufferSize = 256; // check this line for audio/wav
-      this.mediaRecorder.ondataavailable = function (blob) {
-        (0, _audio.convertBlobToAudioBuffer)(blob, _this4.onRecordingConverted.bind(_this4));
+      this.worker = new _inlineWorker2.default(_AudioWorker2.default, {});
+
+      this.worker.onmessage = function (e) {
+        switch (e.data.command) {
+          case 'send_buffers':
+            _this4.audioBuffer = e.data.buffers;
+            break;
+          case 'send_WAV':
+            console.log('send_WAV');
+            //const url = (window.URL || window.webkitURL).createObjectURL(e.data.audioBlob)
+            _this4.props.onRecordComplete(e.data.audioBlob);
+            break;
+        }
       };
-      this.mediaRecorder.start();
     }
   }, {
-    key: 'onRecordingConverted',
-    value: function onRecordingConverted(audioBuffer) {
-      var recordedData = this.state.recordedData;
-
-      var mergedBuffer = (0, _audio.appendBuffer)(recordedData, audioBuffer);
-      this.setState({
-        recordedData: mergedBuffer
-      });
-    }
-  }, {
-    key: 'onMediaError',
-    value: function onMediaError(e) {
-      console.error('media error', e);
-    }
-  }, {
-    key: 'stopRecording',
-    value: function stopRecording() {
-      this.mediaRecorder.stop();
-      this.setState({
-        isRecording: false
-      });
+    key: 'render',
+    value: function render() {
+      return null;
     }
   }]);
 
-  return DesktopRecorder;
+  return DesktopAudioRecorder;
 }(_react.Component);
 
-exports.default = DesktopRecorder;
+exports.default = DesktopAudioRecorder;

package/recorder/index.js

@@ -10,9 +10,9 @@ var _react2 = _interopRequireDefault(_react);
 
 var _is_js = require('is_js');
 
-var _DesktopAudioRecorder = require('./DesktopAudioRecorder');
+var _DesktopRecorder = require('./DesktopRecorder');
 
-var _DesktopAudioRecorder2 = _interopRequireDefault(_DesktopAudioRecorder);
+var _DesktopRecorder2 = _interopRequireDefault(_DesktopRecorder);
 
 var _MobileRecorder = require('./MobileRecorder');
 
@@ -24,12 +24,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var isUserMediaSupported = !!(window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || window.navigator.msGetUserMedia);
 var desktop = !((0, _is_js.tablet)() && (0, _is_js.mobile)());
 
-var Recorder = function Recorder() {
-  return desktop ? isUserMediaSupported ? _react2.default.createElement(_DesktopAudioRecorder2.default, null) : _react2.default.createElement(
+var Recorder = function Recorder(props) {
+  return desktop ? isUserMediaSupported ? _react2.default.createElement(_DesktopRecorder2.default, props) : _react2.default.createElement(
     'div',
     null,
     ' not supported '
-  ) : _react2.default.createElement(_MobileRecorder2.default, null);
+  ) : _react2.default.createElement(_MobileRecorder2.default, props);
 };
 
 exports.default = Recorder;

package/stories/recorder.js

@@ -18,13 +18,30 @@ var _recorder2 = _interopRequireDefault(_recorder);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var API_URL = 'http://localhost:3004/speechtotext';
+
+var sendFile = function sendFile(wav) {
+  var xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState == 4 && xhr.status == 200) {
+      console.log('Speech to text: ', xhr.responseText);
+    }
+  };
+  xhr.open('POST', API_URL, false);
+  xhr.setRequestHeader('Content-Type', 'audio/wav');
+  xhr.send(wav);
+};
+
 var RecorderExample = function RecorderExample() {
-  return _react2.default.createElement(
-    'div',
-    null,
-    _react2.default.createElement(_recorder2.default, null),
-    _react2.default.createElement('audio', { controls: true })
-  );
+  return _react2.default.createElement(_recorder2.default, {
+    onVolumeChange: function onVolumeChange(vol) {},
+    onError: function onError(err) {
+      return console.log('error', err);
+    },
+    onRecordComplete: function onRecordComplete(wax) {
+      return sendFile(wax);
+    }
+  });
 };
 
 exports.default = RecorderExample;

package/utils/audio.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.audioBufferToWav = exports.convertBlobToaudioBuffer = exports.appendBuffer = exports.convertAudioBufferToWaveform = exports.getWaveform = undefined;
+exports.getWaveform = undefined;
 
 var _audioContext = require('./audioContext');
 
@@ -47,166 +47,51 @@ var getWaveform = exports.getWaveform = function getWaveform(url) {
   });
 };
 
-var convertAudioBufferToWaveform = exports.convertAudioBufferToWaveform = function convertAudioBufferToWaveform(audioBuffer) {
+/*
+export const convertAudioBufferToWaveform = (audioBuffer) => {
   // All this code (except the last line) is stolen/inspired from https://github.com/bbc/waveform-data.js/blob/master/lib/builders/audiodecoder.js
-  var scale = 512;
-  var scaleAdjuster = 127;
-  var dataLength = Math.floor(audioBuffer.length / scale);
-  var offset = 20;
-  var dataObject = new DataView(new ArrayBuffer(offset + dataLength * 2));
-  var leftChannel = void 0,
-      rightChannel = void 0;
-  var minValue = Infinity,
-      max_value = -Infinity,
-      scale_counter = scale;
-  var bufferLength = audioBuffer.length;
-
-  dataObject.setInt32(0, 1, true); //version
-  dataObject.setUint32(4, 1, true); //is 8 bit
-  dataObject.setInt32(8, audioBuffer.sampleRate, true); //sample rate
-  dataObject.setInt32(12, scale, true); //scale
-  dataObject.setInt32(16, dataLength, true); //length
+  const scale = 512
+  const scaleAdjuster = 127
+  const dataLength = Math.floor(audioBuffer.length / scale)
+  let offset = 20
+  const dataObject = new DataView(new ArrayBuffer(offset + dataLength * 2))
+  let leftChannel, rightChannel
+  let minValue = Infinity, max_value = -Infinity, scale_counter = scale;
+  const bufferLength = audioBuffer.length
+
+  dataObject.setInt32(0, 1, true);   //version
+  dataObject.setUint32(4, 1, true);   //is 8 bit
+  dataObject.setInt32(8, audioBuffer.sampleRate, true);   //sample rate
+  dataObject.setInt32(12, scale, true);   //scale
+  dataObject.setInt32(16, dataLength, true);   //length
 
   leftChannel = audioBuffer.getChannelData(0);
   rightChannel = audioBuffer.getChannelData(1);
 
-  for (var i = 0; i < bufferLength; i++) {
-    var sample = (leftChannel[i] + rightChannel[i]) / 2 * scaleAdjuster;
+  for (let i = 0; i < bufferLength; i++){
+    const sample = (leftChannel[i] + rightChannel[i]) / 2 * scaleAdjuster;
 
-    if (sample < minValue) {
+    if (sample < minValue){
       minValue = sample;
       if (minValue < -128) {
         minValue = -128;
       }
     }
 
-    if (sample > max_value) {
+    if (sample > max_value){
       max_value = sample;
       if (max_value > 127) {
         max_value = 127;
       }
     }
 
-    if (--scale_counter === 0) {
+    if (--scale_counter === 0){
       dataObject.setInt8(offset++, Math.floor(minValue));
       dataObject.setInt8(offset++, Math.floor(max_value));
-      minValue = Infinity;max_value = -Infinity;scale_counter = scale;
+      minValue = Infinity; max_value = -Infinity; scale_counter = scale;
     }
   }
 
-  return _waveformData2.default.create(dataObject.buffer);
-};
-
-var appendBuffer = exports.appendBuffer = function appendBuffer(buffer1, buffer2) {
-  if (!buffer1) return buffer2;
-  if (!buffer2) return buffer1;
-  var numberOfChannels = Math.min(buffer1.numberOfChannels, buffer2.numberOfChannels);
-  var tmp = audioContext.createBuffer(numberOfChannels, buffer1.length + buffer2.length, buffer1.sampleRate);
-  for (var i = 0; i < numberOfChannels; i++) {
-    var channel = tmp.getChannelData(i);
-    channel.set(buffer1.getChannelData(i), 0);
-    channel.set(buffer2.getChannelData(i), buffer1.length);
-  }
-  return tmp;
-};
-
-var convertBlobToaudioBuffer = exports.convertBlobToaudioBuffer = function convertBlobToaudioBuffer(blob, cb) {
-  var fileReader = new FileReader();
-  fileReader.onload = function (_ref) {
-    var result = _ref.target.result;
-
-    audioContext.decodeAudioData(result, function (buf) {
-      cb(buf);
-    });
-  };
-  fileReader.readAsArrayBuffer(blob);
-};
-
-var audioBufferToWav = exports.audioBufferToWav = function audioBufferToWav(buffer, opt) {
-  opt = opt || {};
-
-  var numChannels = buffer.numberOfChannels;
-  var sampleRate = buffer.sampleRate;
-  var format = opt.float32 ? 3 : 1;
-  var bitDepth = format === 3 ? 32 : 16;
-
-  var result = numChannels === 2 ? interleave(buffer.getChannelData(0), buffer.getChannelData(1)) : buffer.getChannelData(0);
-
-  return encodeWAV(result, format, sampleRate, numChannels, bitDepth);
-};
-
-var encodeWAV = function encodeWAV(samples, format, sampleRate, numChannels, bitDepth) {
-  var bytesPerSample = bitDepth / 8;
-  var blockAlign = numChannels * bytesPerSample;
-
-  var buffer = new ArrayBuffer(44 + samples.length * bytesPerSample);
-  var view = new DataView(buffer);
-
-  /* RIFF identifier */
-  writeString(view, 0, 'RIFF');
-  /* RIFF chunk length */
-  view.setUint32(4, 36 + samples.length * bytesPerSample, true);
-  /* RIFF type */
-  writeString(view, 8, 'WAVE');
-  /* format chunk identifier */
-  writeString(view, 12, 'fmt ');
-  /* format chunk length */
-  view.setUint32(16, 16, true);
-  /* sample format (raw) */
-  view.setUint16(20, format, true);
-  /* channel count */
-  view.setUint16(22, numChannels, true);
-  /* sample rate */
-  view.setUint32(24, sampleRate, true);
-  /* byte rate (sample rate * block align) */
-  view.setUint32(28, sampleRate * blockAlign, true);
-  /* block align (channel count * bytes per sample) */
-  view.setUint16(32, blockAlign, true);
-  /* bits per sample */
-  view.setUint16(34, bitDepth, true);
-  /* data chunk identifier */
-  writeString(view, 36, 'data');
-  /* data chunk length */
-  view.setUint32(40, samples.length * bytesPerSample, true);
-  if (format === 1) {
-    // Raw PCM
-    floatTo16BitPCM(view, 44, samples);
-  } else {
-    writeFloat32(view, 44, samples);
-  }
-  return buffer;
-};
-
-var interleave = function interleave(inputL, inputR) {
-  var length = inputL.length + inputR.length;
-  var result = new Float32Array(length);
-
-  var index = 0;
-  var inputIndex = 0;
-
-  while (index < length) {
-    result[index++] = inputL[inputIndex];
-    result[index++] = inputR[inputIndex];
-    inputIndex++;
-  }
-  return result;
-};
-
-var writeFloat32 = function writeFloat32(output, offset, input) {
-  for (var i = 0; i < input.length; i++, offset += 4) {
-    output.setFloat32(offset, input[i], true);
-  }
-};
-
-var floatTo16BitPCM = function floatTo16BitPCM(output, offset, input) {
-  for (var i = 0; i < input.length; i++, offset += 2) {
-    var s = Math.max(-1, Math.min(1, input[i]));
-    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
-  }
-};
-
-var writeString = function writeString(view, offset, string) {
-  for (var i = 0; i < string.length; i++) {
-    view.setUint8(offset + i, string.charCodeAt(i));
-  }
-};
+  return WaveformData.create(dataObject.buffer)
+}
+*/

package/utils/mediaDevices.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var shimMediaDevices = exports.shimMediaDevices = function shimMediaDevices() {
+  // Older browsers might not implement mediaDevices at all, so we set an empty object first
+  if (window.navigator.mediaDevices === undefined) {
+    window.navigator.mediaDevices = {};
+  }
+
+  // Some browsers partially implement mediaDevices. We can't just assign an object
+  // with getUserMedia as it would overwrite existing properties.
+  // Here, we will just add the getUserMedia property if it's missing.
+  if (window.navigator.mediaDevices.getUserMedia === undefined) {
+    window.navigator.mediaDevices.getUserMedia = function (constraints) {
+
+      // First get ahold of the legacy getUserMedia, if present
+      var getUserMedia = window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
+
+      // Some browsers just don't implement it - return a rejected promise with an error
+      // to keep a consistent interface
+      if (!getUserMedia) {
+        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+      }
+
+      // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+      return new Promise(function (resolve, reject) {
+        getUserMedia.call(navigator, constraints, resolve, reject);
+      });
+    };
+  }
+};

package/recorder/AsyncLoader.js

@@ -1,84 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var loadedScripts = [];
-
-var getCssEl = function getCssEl(_ref) {
-  var href = _ref.href;
-
-  var link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.type = 'text/css';
-  link.href = href;
-  link.media = 'all';
-  return link;
-};
-
-var getScriptEl = function getScriptEl(_ref2) {
-  var src = _ref2.src,
-      onload = _ref2.onload,
-      onError = _ref2.onError;
-
-  var script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = src;
-  script.async = false;
-  script.onload = onload;
-  script.onerror = onError;
-  return script;
-};
-
-var AsyncLoader = function (_Component) {
-  _inherits(AsyncLoader, _Component);
-
-  function AsyncLoader() {
-    _classCallCheck(this, AsyncLoader);
-
-    return _possibleConstructorReturn(this, (AsyncLoader.__proto__ || Object.getPrototypeOf(AsyncLoader)).apply(this, arguments));
-  }
-
-  _createClass(AsyncLoader, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var _props = this.props,
-          src = _props.src,
-          href = _props.href,
-          _props$onLoad = _props.onLoad,
-          onLoad = _props$onLoad === undefined ? function () {} : _props$onLoad,
-          _props$onError = _props.onError,
-          onError = _props$onError === undefined ? function () {} : _props$onError;
-
-      if (src && !loadedScripts.includes(href || src)) {
-        var el = href ? getCssEl({ href: href }) : getScriptEl({ src: src, onLoad: onLoad, onError: onError });
-        document.body.appendChild(el);
-        loadedScripts.push(href || src);
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement('noscript', null);
-    }
-  }]);
-
-  return AsyncLoader;
-}(_react.Component);
-
-exports.default = AsyncLoader;

package/recorder/DesktopAudioRecorder.js

@@ -1,191 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _CustomWave = require('../player/CustomWave');
-
-var _CustomWave2 = _interopRequireDefault(_CustomWave);
-
-var _audioContext = require('../utils/audioContext');
-
-var _audioContext2 = _interopRequireDefault(_audioContext);
-
-var _audio = require('../utils/audio');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var audioContext = new _audioContext2.default();
-
-var DesktopAudioRecorder = function (_Component) {
-  _inherits(DesktopAudioRecorder, _Component);
-
-  function DesktopAudioRecorder(props) {
-    _classCallCheck(this, DesktopAudioRecorder);
-
-    var _this = _possibleConstructorReturn(this, (DesktopAudioRecorder.__proto__ || Object.getPrototypeOf(DesktopAudioRecorder)).call(this, props));
-
-    _this.state = {
-      isRecording: false,
-      recordedData: null,
-      waveform: null
-    };
-    //this.audioRecorder = null
-    _this.buffers = [];
-    return _this;
-  }
-
-  _createClass(DesktopAudioRecorder, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      window.navigator.getUserMedia({
-        "audio": {
-          "mandatory": {
-            "googEchoCancellation": "false",
-            "googAutoGainControl": "false",
-            "googNoiseSuppression": "false",
-            "googHighpassFilter": "false"
-          },
-          "optional": []
-        }
-      }, function (stream) {
-        return _this2.onMediaSuccess(stream);
-      }, function (stream) {
-        return _this2.onMediaError(stream);
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this3 = this;
-
-      var _state = this.state,
-          isRecording = _state.isRecording,
-          waveform = _state.waveform;
-
-      return _react2.default.createElement(
-        'div',
-        null,
-        'Desktop audio recorder',
-        isRecording ? _react2.default.createElement(
-          'button',
-          { onClick: function onClick() {
-              return _this3.stopRecording();
-            } },
-          ' stop recording '
-        ) : _react2.default.createElement(
-          'button',
-          { onClick: function onClick() {
-              return _this3.record();
-            } },
-          ' record '
-        ),
-        waveform ? _react2.default.createElement(_CustomWave2.default, {
-          width: 500,
-          currentTime: 0,
-          totalTime: 200,
-          height: 40,
-          isLoading: false,
-          waveform: waveform
-        }) : null
-      );
-    }
-  }, {
-    key: 'record',
-    value: function record() {
-      this.setState({
-        recordedData: null,
-        isRecording: true
-      });
-    }
-  }, {
-    key: 'onMediaSuccess',
-    value: function onMediaSuccess(stream) {
-      var _this4 = this;
-
-      var bufferSize = 4096;
-      var numberOfInputChannels = 2;
-      var numberOfOutputChannels = 2;
-
-      // creates an audio node from the microphone incoming stream
-      var mediaStream = audioContext.createMediaStreamSource(stream);
-      // https://developer.mozilla.org/en-US/docs/Web/API/AudioaudioContext/createScriptProcessor
-      var recorder = audioContext.createScriptProcessor ? audioContext.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels) : audioContext.createJavaScriptNode(bufferSize, numberOfInputChannels, numberOfOutputChannels);
-
-      recorder.onaudioprocess = function (e) {
-        var _state2 = _this4.state,
-            recordedData = _state2.recordedData,
-            isRecording = _state2.isRecording;
-
-        if (!isRecording) return;
-        var audioBuffer = (0, _audio.appendBuffer)(recordedData, e.inputBuffer);
-        var waveform = (0, _audio.convertAudioBufferToWaveform)(audioBuffer);
-
-        _this4.setState({
-          recordedData: audioBuffer,
-          waveform: waveform
-        });
-      };
-
-      // we connect the recorder with the input stream
-      mediaStream.connect(recorder);
-      recorder.connect(audioContext.destination);
-    }
-  }, {
-    key: 'onMediaError',
-    value: function onMediaError(e) {
-      console.error('media error', e);
-    }
-
-    // This is just for demo purposes: in real life we'll upload the file somewhere
-
-  }, {
-    key: 'updateAudioDom',
-    value: function updateAudioDom() {
-      var recordedData = this.state.recordedData;
-
-      var audioEl = document.querySelector('audio');
-
-      if (audioEl) {
-        var wav = (0, _audio.audioBufferToWav)(recordedData);
-        var audioBlob = new Blob([wav], { type: 'audio/wav' });
-        var reader = new FileReader();
-        reader.onload = function (e) {
-          // e.target.result will hold the base64 data.
-          // Note: It includes the pre-text "data:audio/<format>;base64,<base64 data>"
-          audioEl.src = e.target.result;
-        };
-        reader.readAsDataURL(audioBlob);
-      }
-    }
-  }, {
-    key: 'stopRecording',
-    value: function stopRecording() {
-      this.setState({
-        isRecording: false
-      });
-
-      // Update audio element with new file
-      this.updateAudioDom();
-    }
-  }]);
-
-  return DesktopAudioRecorder;
-}(_react.Component);
-
-exports.default = DesktopAudioRecorder;