@lls/lls-audio 0.0.64 → 0.0.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "2.21.0",
@@ -15,7 +15,7 @@
     "conventional-changelog": "1.1.0",
     "conventional-changelog-cli": "1.2.0",
     "css-loader": "0.26.1",
-    "file-saver": "^1.3.3",
+    "file-saver": "1.3.3",
     "react": "15.3.1",
     "react-dom": "15.3.1",
     "release-it": "2.4.0",
@@ -28,6 +28,7 @@
     "inline-worker": "1.1.0",
     "is_js": "0.9.0",
     "react-input-range": "0.9.3",
+    "react-speech-recognizer": "0.1.1",
     "waveform-data": "2.0.0"
   },
   "peerDependencies": {

package/recorder/AudioWorker.js

@@ -56,7 +56,6 @@ 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);
 

package/recorder/index.js

@@ -99,14 +99,14 @@ var initSpeechEvents = function initSpeechEvents(_ref3) {
   return speechEvents;
 };
 
-var DesktopAudioRecorder = function (_Component) {
-  _inherits(DesktopAudioRecorder, _Component);
+var Recorder = function (_Component) {
+  _inherits(Recorder, _Component);
 
-  function DesktopAudioRecorder(props) {
-    _classCallCheck(this, DesktopAudioRecorder);
+  function Recorder(props) {
+    _classCallCheck(this, Recorder);
 
     // Instances
-    var _this = _possibleConstructorReturn(this, (DesktopAudioRecorder.__proto__ || Object.getPrototypeOf(DesktopAudioRecorder)).call(this, props));
+    var _this = _possibleConstructorReturn(this, (Recorder.__proto__ || Object.getPrototypeOf(Recorder)).call(this, props));
 
     _this.worker = null;
     _this.recorder = null;
@@ -122,7 +122,7 @@ var DesktopAudioRecorder = function (_Component) {
     return _this;
   }
 
-  _createClass(DesktopAudioRecorder, [{
+  _createClass(Recorder, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
       this.init(this.props);
@@ -132,7 +132,9 @@ var DesktopAudioRecorder = function (_Component) {
     value: function init(props) {
       var _this2 = this;
 
-      var _props$onError = props.onError,
+      var _props$onNotAvailable = props.onNotAvailable,
+          onNotAvailable = _props$onNotAvailable === undefined ? function () {} : _props$onNotAvailable,
+          _props$onError = props.onError,
           onError = _props$onError === undefined ? function () {} : _props$onError,
           _props$onVolumeChange = props.onVolumeChange,
           onVolumeChange = _props$onVolumeChange === undefined ? function () {} : _props$onVolumeChange,
@@ -150,7 +152,7 @@ var DesktopAudioRecorder = function (_Component) {
           onRecordComplete: onRecordComplete
         });
       }).catch(function (err) {
-        onError(err);
+        onNotAvailable(err);
       });
     }
   }, {
@@ -216,7 +218,7 @@ var DesktopAudioRecorder = function (_Component) {
     }
   }]);
 
-  return DesktopAudioRecorder;
+  return Recorder;
 }(_react.Component);
 
-exports.default = DesktopAudioRecorder;
+exports.default = Recorder;

package/stories/wordDetector.js

@@ -16,12 +16,6 @@ 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);
@@ -34,6 +28,12 @@ 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 onRecordComplete = function onRecordComplete() {
+  return console.log("onRecordComplete");
+};
+var onNotAvailable = function onNotAvailable() {
+  return console.log("onNotAvailable");
+};
 var onError = function onError(e) {
   return console.log("onError", e);
 };
@@ -44,6 +44,12 @@ var onFailure = function onFailure(res, attempts) {
   return console.log({ res: res, attempts: attempts });
 };
 
+var CONFIG = {
+  API_URL: 'http://localhost:3004/speechtotext'
+
+  // Instanciate component with config
+};var WordDetectorComponent = (0, _wordDetector.createWordDetector)(CONFIG);
+
 var WordDetectorExample = function (_Component) {
   _inherits(WordDetectorExample, _Component);
 
@@ -55,18 +61,10 @@ var WordDetectorExample = function (_Component) {
     _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;
@@ -79,14 +77,16 @@ var WordDetectorExample = function (_Component) {
           null,
           'Say "Hello"'
         ),
-        _react2.default.createElement(_wordDetector2.default, {
+        _react2.default.createElement(WordDetectorComponent, {
           word: 'hello',
           onVolumeChange: this.setVolume,
+          onNotAvailable: onNotAvailable,
           onError: onError,
           onSuccess: onSuccess,
-          onFailure: onFailure
-        }),
-        _react2.default.createElement(_Visualizer2.default, { volume: volume })
+          onFailure: onFailure,
+          record: true,
+          onRecordComplete: onRecordComplete
+        })
       );
     }
   }]);

package/wordDetector/index.js

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createWordDetector = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 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; }; }();
 
@@ -22,6 +25,8 @@ var _fileSaver = require('file-saver');
 
 var _fileSaver2 = _interopRequireDefault(_fileSaver);
 
+var _reactSpeechRecognizer = require('react-speech-recognizer');
+
 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"); } }
@@ -30,21 +35,20 @@ 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 API_URL = 'http://localhost:3004/speechtotext';
 var SIMILARITY_THRESHOLD = 0.8;
+var isSpeechRecognitionAvailable = (0, _reactSpeechRecognizer.speechRecognitionAvailable)();
 
 var debug = function debug(wav) {
   _fileSaver2.default.saveAs(wav, 'test.wav');
 };
 
-var sendFileToSpeechToTextApi = function sendFileToSpeechToTextApi(wav) {
+var sendFileToSpeechToTextApi = function sendFileToSpeechToTextApi(API_URL, 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);
       }
     };
@@ -71,26 +75,38 @@ var WordDetector = function (_Component) {
     var _this = _possibleConstructorReturn(this, (WordDetector.__proto__ || Object.getPrototypeOf(WordDetector)).call(this, props));
 
     _this.state = {
-      attempts: 0
+      attempts: 0,
+      browserApiAvailable: true
     };
     _this.onError = _this.onError.bind(_this);
-    _this.onResult = _this.onResult.bind(_this);
+    _this.onSuccess = _this.onSuccess.bind(_this);
+    _this.onFailure = _this.onFailure.bind(_this);
+    _this.onApiResult = _this.onApiResult.bind(_this);
     _this.onRecordComplete = _this.onRecordComplete.bind(_this);
     return _this;
   }
 
   _createClass(WordDetector, [{
-    key: 'onRecordComplete',
-    value: function onRecordComplete(wav) {
-      var _this2 = this;
+    key: 'onSuccess',
+    value: function onSuccess(res, attempts) {
+      var _props$onSuccess = this.props.onSuccess,
+          onSuccess = _props$onSuccess === undefined ? function () {} : _props$onSuccess;
 
-      //debug(wav)
+      this.setState({
+        attempts: attempts
+      });
+      onSuccess(res, attempts);
+    }
+  }, {
+    key: 'onFailure',
+    value: function onFailure(res, attempts) {
+      var _props$onFailure = this.props.onFailure,
+          onFailure = _props$onFailure === undefined ? function () {} : _props$onFailure;
 
-      sendFileToSpeechToTextApi(wav).then(function (res) {
-        _this2.onResult(res);
-      }).catch(function (e) {
-        _this2.onError(e);
+      this.setState({
+        attempts: attempts
       });
+      onFailure(res, attempts);
     }
   }, {
     key: 'onError',
@@ -101,39 +117,76 @@ var WordDetector = function (_Component) {
       onError(e);
     }
   }, {
-    key: 'onResult',
-    value: function onResult() {
-      var res = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    key: 'onApiResult',
+    value: function onApiResult(_ref) {
+      var _ref$transcript = _ref.transcript,
+          transcript = _ref$transcript === undefined ? '' : _ref$transcript;
       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);
-      });
+      var success = compare(word, transcript);
+      var cb = success ? this.onSuccess : this.onFailure;
+      cb(transcript, incrementedAttempts);
+    }
+  }, {
+    key: 'onRecordComplete',
+    value: function onRecordComplete(wav) {
+      var _this2 = this;
+
+      //debug(wav)
+      var _props2 = this.props,
+          _props2$config = _props2.config,
+          config = _props2$config === undefined ? {} : _props2$config,
+          _props2$onRecordCompl = _props2.onRecordComplete,
+          onRecordComplete = _props2$onRecordCompl === undefined ? function () {} : _props2$onRecordCompl;
+      var API_URL = config.API_URL;
+      var browserApiAvailable = this.state.browserApiAvailable;
+
+      // Upload to Speech to text Api
+
+      if (!isSpeechRecognitionAvailable) {
+        if (!API_URL) {
+          return this.onError(new Error('Missing API_URL in CONF'));
+        }
+
+        sendFileToSpeechToTextApi(API_URL, wav).then(function (res) {
+          _this2.onApiResult(res);
+        }).catch(function (e) {
+          _this2.onError(e);
+        });
+      }
+
+      onRecordComplete(wav);
     }
   }, {
     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 });
+      var _props3 = this.props,
+          _props3$record = _props3.record,
+          record = _props3$record === undefined ? false : _props3$record,
+          word = _props3.word,
+          _props3$compare = _props3.compare,
+          compare = _props3$compare === undefined ? defaultCompare : _props3$compare;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        isSpeechRecognitionAvailable ? _react2.default.createElement(_reactSpeechRecognizer.WordDetector, { word: word, compare: compare, onFailure: this.onFailure, onSuccess: this.onSuccess }) : _react2.default.createElement(_recorder2.default, { onError: this.onError, onRecordComplete: this.onRecordComplete }),
+        isSpeechRecognitionAvailable && record && _react2.default.createElement(_recorder2.default, { onError: this.onError, onRecordComplete: this.onRecordComplete })
+      );
     }
   }]);
 
   return WordDetector;
 }(_react.Component);
 
-exports.default = WordDetector;
+exports.default = WordDetector;
+var createWordDetector = exports.createWordDetector = function createWordDetector(config) {
+  return function (props) {
+    return _react2.default.createElement(WordDetector, _extends({}, props, { config: config }));
+  };
+};