@lls/lls-audio 0.0.60 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "2.21.0",
@@ -15,9 +15,11 @@
     "conventional-changelog": "1.1.0",
     "conventional-changelog-cli": "1.2.0",
     "css-loader": "0.26.1",
+    "file-saver": "^1.3.3",
     "react": "15.3.1",
     "react-dom": "15.3.1",
     "release-it": "2.4.0",
+    "similarity": "1.1.1",
     "style-loader": "0.13.1",
     "superheroes": "1.0.0"
   },

package/player/styles/styles.js

@@ -29,10 +29,12 @@ exports.default = {
   inline: {
     width: '100%'
   },
-  volume: {
+  volume: _defineProperty({
     width: 100,
     cursor: 'pointer'
-  },
+  }, _mediaQueries.MOBILE, {
+    width: 55
+  }),
   iconAudio: {
     color: _colors.BLUE,
     marginRight: 20,
@@ -58,8 +60,7 @@ exports.default = {
     width: 'calc(100% - 430px)',
     display: 'flex'
   }, _mediaQueries.MOBILE, {
-    flex: '1 100%',
-    order: 2,
+    width: 'calc(100% - 225px)',
     margin: '0px 28px'
   }),
   content: {
@@ -88,22 +89,36 @@ exports.default = {
   wavetimeline: _defineProperty({}, _mediaQueries.MOBILE, {
     display: 'none'
   }),
-  loader: {
+  loader: _defineProperty({
     height: 60,
     color: '#00b3df',
     fontSize: 10,
     fontWeight: 'bold',
     lineHeight: '60px',
     textAlign: 'center'
-  },
-  loaderText: {
+  }, _mediaQueries.MOBILE, {
+    lineHeight: 1.5
+  }),
+  loaderText: _defineProperty({
     textTransform: 'uppercase'
-  },
-  loaderOne: {},
-  loaderTwo: {},
-  loaderThree: {},
+  }, _mediaQueries.MOBILE, {
+    position: 'relative',
+    top: 30
+  }),
+  loaderOne: _defineProperty({}, _mediaQueries.MOBILE, {
+    position: 'relative',
+    top: 30
+  }),
+  loaderTwo: _defineProperty({}, _mediaQueries.MOBILE, {
+    position: 'relative',
+    top: 30
+  }),
+  loaderThree: _defineProperty({}, _mediaQueries.MOBILE, {
+    position: 'relative',
+    top: 30
+  }),
   timeline: _defineProperty({
-    width: '100%',
+    width: 'calc(100% - 90px)',
     margin: '0px 20px',
     position: 'relative',
     display: 'flex',
@@ -117,11 +132,13 @@ exports.default = {
     fontSize: 23,
     cursor: 'pointer'
   }, _mediaQueries.MOBILE, {
-    marginRight: 37
+    display: 'none'
   }),
-  speed_menu: {
+  speed_menu: _defineProperty({
     marginLeft: 10
-  },
+  }, _mediaQueries.MOBILE, {
+    display: 'none'
+  }),
   close: {
     cursor: 'pointer',
     position: 'absolute',

package/recorder/AudioWorker.js

@@ -56,6 +56,7 @@ var AudioWorker = function AudioWorker(self) {
     };
 
     var encodeWAV = function encodeWAV(samples) {
+      console.log("samples", samples.length);
       var buffer = new ArrayBuffer(44 + samples.length * 2);
       var view = new DataView(buffer);
 
@@ -76,7 +77,7 @@ var AudioWorker = function AudioWorker(self) {
       /* sample rate */
       view.setUint32(24, 44100, true);
       /* byte rate (sample rate * block align) */
-      view.setUint32(28, 44100 * 4, true);
+      view.setUint32(28, 44100 * recBuffers.length * 2, true);
       /* block align (channel count * bytes per sample) */
       view.setUint16(32, recBuffers.length * 2, true);
       /* bits per sample */

package/recorder/Visualizer.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Circle = function Circle(_ref) {
+  var radius = _ref.radius,
+      maxRadius = _ref.maxRadius,
+      color = _ref.color;
+  return _react2.default.createElement('circle', { r: radius, cx: 100, cy: 100, style: { 'transition': 'all 0.1s', 'fill': 'red', opacity: 0.2 + radius / maxRadius } });
+};
+
+var Visualizer = function Visualizer(_ref2) {
+  var volume = _ref2.volume;
+
+  var radius = (100 + volume) / 2;
+  radius = radius < 0 ? 0 : radius;
+
+  return _react2.default.createElement(
+    'svg',
+    null,
+    _react2.default.createElement(Circle, { radius: radius, maxRadius: 100 })
+  );
+};
+
+exports.default = Visualizer;

package/recorder/index.js

@@ -4,32 +4,219 @@ 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 _is_js = require('is_js');
+var _CustomWave = require('../player/CustomWave');
+
+var _CustomWave2 = _interopRequireDefault(_CustomWave);
+
+var _audioContext = require('../utils/audioContext');
+
+var _audioContext2 = _interopRequireDefault(_audioContext);
+
+var _mediaDevices = require('../utils/mediaDevices');
 
-var _DesktopRecorder = require('./DesktopRecorder');
+var _hark = require('hark');
 
-var _DesktopRecorder2 = _interopRequireDefault(_DesktopRecorder);
+var _hark2 = _interopRequireDefault(_hark);
 
-var _MobileRecorder = require('./MobileRecorder');
+var _inlineWorker = require('inline-worker');
 
-var _MobileRecorder2 = _interopRequireDefault(_MobileRecorder);
+var _inlineWorker2 = _interopRequireDefault(_inlineWorker);
+
+var _AudioWorker = require('./AudioWorker');
+
+var _AudioWorker2 = _interopRequireDefault(_AudioWorker);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Check browser support
-var isUserMediaSupported = !!(window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || window.navigator.msGetUserMedia);
-var desktop = !((0, _is_js.tablet)() && (0, _is_js.mobile)());
+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 INTERVAL = 100;
+
+var audioContext = new _audioContext2.default();
+
+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 initWorker = function initWorker(_ref2) {
+  var _ref2$onMessage = _ref2.onMessage,
+      onMessage = _ref2$onMessage === undefined ? function () {} : _ref2$onMessage;
+
+  var worker = new _inlineWorker2.default(_AudioWorker2.default, {});
+  worker.onmessage = onMessage;
+  return worker;
+};
+
+var initSpeechEvents = function initSpeechEvents(_ref3) {
+  var stream = _ref3.stream,
+      _ref3$onSpeaking = _ref3.onSpeaking,
+      onSpeaking = _ref3$onSpeaking === undefined ? function () {} : _ref3$onSpeaking,
+      _ref3$onStoppedSpeaki = _ref3.onStoppedSpeaking,
+      onStoppedSpeaking = _ref3$onStoppedSpeaki === undefined ? function () {} : _ref3$onStoppedSpeaki,
+      _ref3$onVolumeChange = _ref3.onVolumeChange,
+      onVolumeChange = _ref3$onVolumeChange === undefined ? function () {} : _ref3$onVolumeChange;
+
+  // Try hark
+  var options = {
+    interval: INTERVAL
+    //play: true // true: allow to hear the result for debug
+  };
+  var speechEvents = (0, _hark2.default)(stream, options);
 
-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, props);
+  speechEvents.on('speaking', onSpeaking);
+  speechEvents.on('stopped_speaking', onStoppedSpeaking);
+  speechEvents.on('volume_change', onVolumeChange);
+
+  return speechEvents;
 };
 
-exports.default = Recorder;
+var DesktopAudioRecorder = function (_Component) {
+  _inherits(DesktopAudioRecorder, _Component);
+
+  function DesktopAudioRecorder(props) {
+    _classCallCheck(this, DesktopAudioRecorder);
+
+    // Instances
+    var _this = _possibleConstructorReturn(this, (DesktopAudioRecorder.__proto__ || Object.getPrototypeOf(DesktopAudioRecorder)).call(this, props));
+
+    _this.worker = null;
+    _this.recorder = null;
+    _this.speechEvents = null;
+
+    // Data
+    _this.recordStart = null;
+    _this.audioBuffer = [];
+
+    // Methods
+    _this.init = _this.init.bind(_this);
+    _this.initStream = _this.initStream.bind(_this);
+    return _this;
+  }
+
+  _createClass(DesktopAudioRecorder, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.init(this.props);
+    }
+  }, {
+    key: 'init',
+    value: function init(props) {
+      var _this2 = this;
+
+      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);
+      });
+    }
+  }, {
+    key: 'initStream',
+    value: function initStream(_ref4) {
+      var _this3 = this;
+
+      var stream = _ref4.stream,
+          onError = _ref4.onError,
+          _onVolumeChange = _ref4.onVolumeChange,
+          onRecordComplete = _ref4.onRecordComplete;
+
+      // Init worker that will do heavy calculation
+      this.worker = initWorker({ onMessage: function onMessage(e) {
+          switch (e.data.command) {
+            case 'send_buffers':
+              _this3.audioBuffer = e.data.buffers;
+              break;
+            case 'send_WAV':
+              //const url = (window.URL || window.webkitURL).createObjectURL(e.data.audioBlob)
+              onRecordComplete(e.data.audioBlob);
+              break;
+          }
+        } });
+
+      // Init recorder
+      this.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 });
+        }
+      });
+
+      // Initialize hark for silence recognition
+      this.speechEvents = initSpeechEvents({
+        stream: stream,
+        onStoppedSpeaking: function onStoppedSpeaking() {
+          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() {
+          _this3.recordStart = Date.now() - INTERVAL * 3; // give it a bit of extra time
+        },
+        onVolumeChange: function onVolumeChange(volume) {
+          _onVolumeChange(volume);
+        }
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return null;
+    }
+  }]);
+
+  return DesktopAudioRecorder;
+}(_react.Component);
+
+exports.default = DesktopAudioRecorder;

package/stories/index.js

@@ -14,12 +14,17 @@ var _playerRange = require('./playerRange');
 
 var _playerRange2 = _interopRequireDefault(_playerRange);
 
-var _recorder = require('./recorder');
+var _visualizer = require('./visualizer');
 
-var _recorder2 = _interopRequireDefault(_recorder);
+var _visualizer2 = _interopRequireDefault(_visualizer);
+
+var _wordDetector = require('./wordDetector');
+
+var _wordDetector2 = _interopRequireDefault(_wordDetector);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+//import PlayerCustom from './playerCustom'
 (0, _storybook.storiesOf)('Player', module).add('Custom waveform', function () {
   return _react2.default.createElement(_player2.default, null);
 }).add('Ranges', function () {
@@ -31,8 +36,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 }).add('Caption', function () {
   return _react2.default.createElement(_player2.default, { caption: 'Je suis une caption :)' });
 });
-//import PlayerCustom from './playerCustom'
-
-(0, _storybook.storiesOf)('Recorder', module).add('Normal', function () {
-  return _react2.default.createElement(_recorder2.default, null);
+(0, _storybook.storiesOf)('Recorder', module).add('Visualizer', function () {
+  return _react2.default.createElement(_visualizer2.default, null);
+});
+(0, _storybook.storiesOf)('Word detector', module).add('Normal', function () {
+  return _react2.default.createElement(_wordDetector2.default, null);
 });

package/stories/visualizer.js

@@ -0,0 +1,77 @@
+'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 _player = require('../player');
+
+var _player2 = _interopRequireDefault(_player);
+
+var _recorder = require('../recorder');
+
+var _recorder2 = _interopRequireDefault(_recorder);
+
+var _Visualizer = require('../recorder/Visualizer');
+
+var _Visualizer2 = _interopRequireDefault(_Visualizer);
+
+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 VisualizerExample = function (_Component) {
+  _inherits(VisualizerExample, _Component);
+
+  function VisualizerExample(props) {
+    _classCallCheck(this, VisualizerExample);
+
+    var _this = _possibleConstructorReturn(this, (VisualizerExample.__proto__ || Object.getPrototypeOf(VisualizerExample)).call(this, props));
+
+    _this.state = {
+      volume: 0
+    };
+    _this.setVolume = _this.setVolume.bind(_this);
+    return _this;
+  }
+
+  _createClass(VisualizerExample, [{
+    key: 'setVolume',
+    value: function setVolume(volume) {
+      this.setState({
+        volume: volume
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var volume = this.state.volume;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(_recorder2.default, {
+          onVolumeChange: this.setVolume,
+          onError: function onError(err) {
+            return console.log('error', err);
+          }
+        }),
+        _react2.default.createElement(_Visualizer2.default, { volume: volume })
+      );
+    }
+  }]);
+
+  return VisualizerExample;
+}(_react.Component);
+
+exports.default = VisualizerExample;

package/stories/wordDetector.js

@@ -0,0 +1,97 @@
+'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 _player = require('../player');
+
+var _player2 = _interopRequireDefault(_player);
+
+var _wordDetector = require('../wordDetector');
+
+var _wordDetector2 = _interopRequireDefault(_wordDetector);
+
+var _Visualizer = require('../recorder/Visualizer');
+
+var _Visualizer2 = _interopRequireDefault(_Visualizer);
+
+var _recorder = require('../recorder');
+
+var _recorder2 = _interopRequireDefault(_recorder);
+
+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 onError = function onError(e) {
+  return console.log("onError", e);
+};
+var onSuccess = function onSuccess(res, attempts) {
+  return console.log({ res: res, attempts: attempts });
+};
+var onFailure = function onFailure(res, attempts) {
+  return console.log({ res: res, attempts: attempts });
+};
+
+var WordDetectorExample = function (_Component) {
+  _inherits(WordDetectorExample, _Component);
+
+  function WordDetectorExample(props) {
+    _classCallCheck(this, WordDetectorExample);
+
+    var _this = _possibleConstructorReturn(this, (WordDetectorExample.__proto__ || Object.getPrototypeOf(WordDetectorExample)).call(this, props));
+
+    _this.state = {
+      volume: 0
+    };
+    _this.setVolume = _this.setVolume.bind(_this);
+    return _this;
+  }
+
+  _createClass(WordDetectorExample, [{
+    key: 'setVolume',
+    value: function setVolume(volume) {
+      this.setState({
+        volume: volume
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var volume = this.state.volume;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'div',
+          null,
+          'Say "Hello"'
+        ),
+        _react2.default.createElement(_wordDetector2.default, {
+          word: 'hello',
+          onVolumeChange: this.setVolume,
+          onError: onError,
+          onSuccess: onSuccess,
+          onFailure: onFailure
+        }),
+        _react2.default.createElement(_Visualizer2.default, { volume: volume })
+      );
+    }
+  }]);
+
+  return WordDetectorExample;
+}(_react.Component);
+
+exports.default = WordDetectorExample;

package/wordDetector/index.js

@@ -0,0 +1,139 @@
+'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 _recorder = require('../recorder');
+
+var _recorder2 = _interopRequireDefault(_recorder);
+
+var _similarity = require('similarity');
+
+var _similarity2 = _interopRequireDefault(_similarity);
+
+var _fileSaver = require('file-saver');
+
+var _fileSaver2 = _interopRequireDefault(_fileSaver);
+
+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 API_URL = 'http://localhost:3004/speechtotext';
+var SIMILARITY_THRESHOLD = 0.8;
+
+var debug = function debug(wav) {
+  _fileSaver2.default.saveAs(wav, 'test.wav');
+};
+
+var sendFileToSpeechToTextApi = function sendFileToSpeechToTextApi(wav) {
+  return new Promise(function (resolve, reject) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', API_URL, true);
+
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        console.log('Speech to text: ', xhr.responseText);
+        resolve(xhr.responseText);
+      }
+    };
+    xhr.onerror = function () {
+      reject();
+    };
+    xhr.setRequestHeader('Content-Type', 'audio/wav');
+    xhr.send(wav);
+  });
+};
+
+var defaultCompare = function defaultCompare() {
+  var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return (0, _similarity2.default)(a.toLowerCase().trim(), b.toLowerCase().trim()) > SIMILARITY_THRESHOLD;
+};
+
+var WordDetector = function (_Component) {
+  _inherits(WordDetector, _Component);
+
+  function WordDetector(props) {
+    _classCallCheck(this, WordDetector);
+
+    var _this = _possibleConstructorReturn(this, (WordDetector.__proto__ || Object.getPrototypeOf(WordDetector)).call(this, props));
+
+    _this.state = {
+      attempts: 0
+    };
+    _this.onError = _this.onError.bind(_this);
+    _this.onResult = _this.onResult.bind(_this);
+    _this.onRecordComplete = _this.onRecordComplete.bind(_this);
+    return _this;
+  }
+
+  _createClass(WordDetector, [{
+    key: 'onRecordComplete',
+    value: function onRecordComplete(wav) {
+      var _this2 = this;
+
+      //debug(wav)
+
+      sendFileToSpeechToTextApi(wav).then(function (res) {
+        _this2.onResult(res);
+      }).catch(function (e) {
+        _this2.onError(e);
+      });
+    }
+  }, {
+    key: 'onError',
+    value: function onError(e) {
+      var _props$onError = this.props.onError,
+          onError = _props$onError === undefined ? function () {} : _props$onError;
+
+      onError(e);
+    }
+  }, {
+    key: 'onResult',
+    value: function onResult() {
+      var res = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var attempts = this.state.attempts;
+      var _props = this.props,
+          word = _props.word,
+          _props$onSuccess = _props.onSuccess,
+          onSuccess = _props$onSuccess === undefined ? function () {} : _props$onSuccess,
+          _props$onFailure = _props.onFailure,
+          onFailure = _props$onFailure === undefined ? function () {} : _props$onFailure,
+          _props$compare = _props.compare,
+          compare = _props$compare === undefined ? defaultCompare : _props$compare;
+
+      var incrementedAttempts = attempts + 1;
+      var success = compare(word, res);
+      this.setState({
+        attempts: success ? 0 : incrementedAttempts
+      }, function () {
+        var cb = success ? onSuccess : onFailure;
+        cb(res, incrementedAttempts);
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props$onVolumeChange = this.props.onVolumeChange,
+          onVolumeChange = _props$onVolumeChange === undefined ? function () {} : _props$onVolumeChange;
+
+      return _react2.default.createElement(_recorder2.default, { onError: this.onError, onVolumeChange: onVolumeChange, onRecordComplete: this.onRecordComplete });
+    }
+  }]);
+
+  return WordDetector;
+}(_react.Component);
+
+exports.default = WordDetector;

package/recorder/DesktopRecorder.js

@@ -1,214 +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 _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 }; }
-
-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 INTERVAL = 100;
-
-var audioContext = new _audioContext2.default();
-
-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;
-};
-
-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.recordStart = null;
-    _this.audioBuffer = [];
-    _this.init = _this.init.bind(_this);
-    _this.initStream = _this.initStream.bind(_this);
-    return _this;
-  }
-
-  _createClass(DesktopAudioRecorder, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.init(this.props);
-    }
-  }, {
-    key: 'init',
-    value: function init(props) {
-      var _this2 = this;
-
-      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: 'initStream',
-    value: function initStream(_ref3) {
-      var _this3 = this;
-
-      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 });
-        }
-      });
-
-      // 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: 'initWorker',
-    value: function initWorker() {
-      var _this4 = this;
-
-      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;
-        }
-      };
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return null;
-    }
-  }]);
-
-  return DesktopAudioRecorder;
-}(_react.Component);
-
-exports.default = DesktopAudioRecorder;

package/stories/recorder.js

@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _player = require('../player');
-
-var _player2 = _interopRequireDefault(_player);
-
-var _recorder = require('../recorder');
-
-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(_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;