@lls/lls-audio 0.0.14 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -34,11 +34,11 @@
     "node": ">=0.12.0"
   },
   "repository": {
-    "url": "github.com/lelivrescolaire/lls-ui"
+    "url": "github.com/lelivrescolaire/sound-poke"
   },
   "scripts": {
     "start": "npm run storybook",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "start-storybook -p 9009",
     "deploy-storybook": "storybook-to-ghpages",
     "build": "rm -rf dist && mkdir dist && babel -d dist src",
     "copy:package": "cp -R package.json dist/",

package/player/Audio.js

@@ -28,6 +28,8 @@ var Player = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, (Player.__proto__ || Object.getPrototypeOf(Player)).call(this, props));
 
+    _this.requestAnimationId = null;
+
     _this.play = function () {
       return _this.refs.player.play();
     };
@@ -65,12 +67,27 @@ var Player = function (_Component) {
       return _this.setStateWithCallback({ currentTime: _this.getCurrentTime() });
     };
 
+    _this.watchAudioUpdate = function () {
+      var step = function step(timestamp) {
+        if (_this.getCurrentTime() !== _this.state.currentTime) {
+          _this.setStateWithCallback({ currentTime: _this.getCurrentTime() });
+        }
+        _this.requestAnimationId = requestAnimationFrame(step);
+      };
+
+      _this.requestAnimationId = requestAnimationFrame(step);
+    };
+
     _this.onPlay = function () {
-      return _this.setStateWithCallback({ play: true });
+      _this.setStateWithCallback({ play: true }, function () {
+        return _this.watchAudioUpdate();
+      });
     };
 
     _this.onPause = function () {
-      return _this.setStateWithCallback({ play: false });
+      _this.setStateWithCallback({ play: false }, function () {
+        return cancelAnimationFrame(_this.requestAnimationId);
+      });
     };
 
     _this.onEnded = function () {
@@ -92,7 +109,7 @@ var Player = function (_Component) {
       duration: 0
     };
 
-    (0, _utils.autoBind)(['onEnded', 'onDurationChange', 'onAudioUpdate', 'onPlay', 'onPause'], _this);
+    (0, _utils.autoBind)(['onEnded', 'onDurationChange', 'onPlay', 'onPause', 'onAudioUpdate'], _this);
 
     // Execute callback onChange props
     _this.setStateWithCallback = function (state) {
@@ -139,14 +156,13 @@ var Player = function (_Component) {
     key: 'componentDidMount',
     value: function componentDidMount() {
       this.props.onChange(this.state);
-
       var player = this.refs.player;
 
       player.addEventListener('ended', this.onEnded);
       player.addEventListener('durationchange', this.onDurationChange);
-      player.addEventListener('timeupdate', this.onAudioUpdate);
       player.addEventListener('play', this.onPlay);
       player.addEventListener('pause', this.onPause);
+      player.addEventListener('timeupdate', this.onAudioUpdate);
     }
   }, {
     key: 'componentWillUnmount',
@@ -155,9 +171,9 @@ var Player = function (_Component) {
 
       player.removeEventListener('ended', this.onEnded);
       player.removeEventListener('durationchange', this.onDurationChange);
-      player.removeEventListener('timeupdate', this.onAudioUpdate);
       player.removeEventListener('play', this.onPlay);
       player.removeEventListener('pause', this.onPause);
+      player.removeEventListener('timeupdate', this.onAudioUpdate);
     }
   }, {
     key: 'getCurrentTime',
@@ -168,6 +184,7 @@ var Player = function (_Component) {
           startTime = _state$currentRange.startTime,
           endTime = _state$currentRange.endTime,
           loop = _state.loop;
+
       // check if current time is in the middle of current range
 
       if (currentTime > endTime || currentTime < startTime) {
@@ -183,6 +200,7 @@ var Player = function (_Component) {
       var duration = this.refs.player.duration;
 
       this.setStateWithCallback({
+        play: false,
         currentTime: 0,
         duration: duration,
         currentRange: { startTime: 0, endTime: duration }

package/player/index.js

@@ -84,7 +84,20 @@ var Player = function (_Component) {
       return _this.refs.audio.setRange(range);
     };
 
-    _this.state = { waveform: false, loading: true, containerWidth: 0 };
+    _this.toggleVisible = function () {
+      var visible = _this.state.visible;
+
+      _this.setState({
+        visible: !visible
+      });
+    };
+
+    _this.state = {
+      waveform: false,
+      loading: true,
+      containerWidth: 0,
+      visible: true
+    };
     _this.setContainerWidth = (0, _utils.debounce)(_this.setContainerWidth.bind(_this), 500);
     _this.onKeyPress = _this.onKeyPress.bind(_this);
     return _this;
@@ -109,7 +122,7 @@ var Player = function (_Component) {
   }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(newProps) {
-      if (newProps.url !== this.props.url) {
+      if (newProps.src !== this.props.src || newProps.visible !== newProps.visible) {
         this.initialize(newProps);
       }
     }
@@ -138,10 +151,16 @@ var Player = function (_Component) {
     value: function initialize(props) {
       var _this3 = this;
 
-      var url = props.url;
+      var src = props.src,
+          _props$visible = props.visible,
+          visible = _props$visible === undefined ? true : _props$visible;
 
-      (0, _audio.getWaveform)(url).then(function (waveform) {
-        _this3.setState({ waveform: waveform, loading: false });
+      (0, _audio.getWaveform)(src).then(function (waveform) {
+        _this3.setState({
+          waveform: waveform,
+          loading: false,
+          visible: visible
+        });
       });
     }
   }, {
@@ -149,7 +168,9 @@ var Player = function (_Component) {
     value: function render() {
       var _this4 = this;
 
-      var url = this.props.url;
+      var _props = this.props,
+          src = _props.src,
+          className = _props.className;
       var _state = this.state,
           loading = _state.loading,
           duration = _state.duration,
@@ -159,7 +180,8 @@ var Player = function (_Component) {
           containerWidth = _state.containerWidth,
           speed = _state.speed,
           _state$currentRange = _state.currentRange,
-          currentRange = _state$currentRange === undefined ? {} : _state$currentRange;
+          currentRange = _state$currentRange === undefined ? {} : _state$currentRange,
+          visible = _state.visible;
       var _currentRange$startTi = currentRange.startTime,
           startTime = _currentRange$startTi === undefined ? 0 : _currentRange$startTi,
           _currentRange$endTime = currentRange.endTime,
@@ -167,7 +189,7 @@ var Player = function (_Component) {
 
       return _react2.default.createElement(
         'div',
-        { className: 'Audio_player ' + (0, _noImportant.css)(styles.player) },
+        { className: 'Audio_player ' + (0, _noImportant.css)(styles.player) + ' ' + className + ' ' + (visible ? '' : (0, _noImportant.css)(styles.hidden)) },
         _react2.default.createElement(
           'div',
           { className: (0, _noImportant.css)(styles.play_and_stop), onClick: function onClick() {
@@ -177,7 +199,7 @@ var Player = function (_Component) {
         ),
         _react2.default.createElement(_Audio2.default, { onChange: function onChange(state) {
             return _this4.setState(_extends({}, state));
-          }, ref: 'audio', src: url }),
+          }, ref: 'audio', src: src }),
         _react2.default.createElement(
           'div',
           { className: (0, _noImportant.css)(styles.timeline), ref: 'container' },
@@ -211,7 +233,10 @@ var Player = function (_Component) {
           _react2.default.createElement(_reactInputRange2.default, { classNames: _volumeClassNames2.default, maxValue: 100, minValue: 0, value: this.state.volume, onChange: function onChange(c, v) {
               return _this4.refs.audio.setVolume(v);
             } })
-        )
+        ),
+        _react2.default.createElement('div', { className: 'Close ' + (0, _noImportant.css)(styles.close), onClick: function onClick() {
+            return _this4.toggleVisible();
+          } })
       );
     }
   }]);

package/player/styles/styles.js

@@ -60,5 +60,18 @@ exports.default = {
     ':hover': {
       overflow: 'visible'
     }
-  })
+  }),
+  close: {
+    cursor: 'pointer',
+    position: 'absolute',
+    top: 1,
+    right: 3,
+    ':after': {
+      content: "'✖'",
+      color: '#e5e5e5'
+    }
+  },
+  hidden: {
+    display: 'none'
+  }
 };

package/player/styles/timelineClassNames.js

@@ -55,8 +55,7 @@ var styles = exports.styles = _noImportant.StyleSheet.create({
   },
   trackActive: {
     backgroundColor: 'transparent'
-  },
-  sliderContainer: {}
+  }
 });
 
 exports.default = (0, _utils.concatStyle)(_sliderDefaultClassNames2.default, styles);

package/recorder/DesktopAudioRecorder.js

@@ -109,6 +109,7 @@ var DesktopAudioRecorder = function (_Component) {
     key: 'record',
     value: function record() {
       this.setState({
+        recordedData: null,
         isRecording: true
       });
     }
@@ -150,12 +151,37 @@ var DesktopAudioRecorder = function (_Component) {
     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();
     }
   }]);
 

package/recorder/DesktopRecorder.js

@@ -118,7 +118,6 @@ var DesktopRecorder = function (_Component) {
       var recordedData = this.state.recordedData;
 
       var mergedBuffer = (0, _audio.appendBuffer)(recordedData, audioBuffer);
-      console.log("mergedBuffer", mergedBuffer);
       this.setState({
         recordedData: mergedBuffer
       });

package/stories/player.js

@@ -62,7 +62,7 @@ var PlayerExample = function (_Component) {
             'http://lls-media-public.s3.amazonaws.com/upload/LeLivreScolaire/p15vcjbl4lvpl9l7g8ov8ammh1.mp3'
           )
         ),
-        _react2.default.createElement(_player2.default, { url: this.state.url })
+        _react2.default.createElement(_player2.default, { src: this.state.url })
       );
     }
   }]);

package/stories/recorder.js

@@ -22,8 +22,8 @@ var RecorderExample = function RecorderExample() {
   return _react2.default.createElement(
     'div',
     null,
-    _react2.default.createElement(_player2.default, { url: 'english.mp3' }),
-    _react2.default.createElement(_recorder2.default, null)
+    _react2.default.createElement(_recorder2.default, null),
+    _react2.default.createElement('audio', { controls: true })
   );
 };
 

package/utils/audio.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertBlobToaudioBuffer = exports.appendBuffer = exports.convertAudioBufferToWaveform = exports.getWaveform = undefined;
+exports.audioBufferToWav = exports.convertBlobToaudioBuffer = exports.appendBuffer = exports.convertAudioBufferToWaveform = exports.getWaveform = undefined;
 
 var _audioContext = require('./audioContext');
 
@@ -120,4 +120,93 @@ var convertBlobToaudioBuffer = exports.convertBlobToaudioBuffer = function conve
     });
   };
   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));
+  }
 };