From 35e579c5660a94fb17e72aaabd634a872dde9bec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A4=C3=A4s?= <david_naas@hotmail.com>
Date: Sun, 28 Aug 2016 22:17:56 +0200
Subject: [PATCH 1/5] Add MVP recorder functionality

---
 demo/demo.js           |  24 +++++++++
 demo/index.css         |   2 +-
 src/components/song.js |  20 +++++++-
 src/utils/recorder.js  | 112 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 155 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/recorder.js

diff --git a/demo/demo.js b/demo/demo.js
index 5a11d49..94d84af 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -19,6 +19,7 @@ export default class Demo extends Component {
 
     this.state = {
       playing: true,
+      downloadLinkVisible: false,
     };
 
     this.handleAudioProcess = this.handleAudioProcess.bind(this);
@@ -32,12 +33,34 @@ export default class Demo extends Component {
       playing: !this.state.playing,
     });
   }
+
+  handleRecordStop(blob, fileName) {
+    this.setState({
+      downloadLinkVisible: true,
+    }, () => {
+      const url = URL.createObjectURL(blob);
+      const anchor = this.refs.downloadLink;
+      anchor.href = url;
+      anchor.download = new Date().toISOString() + '.wav';
+    });
+  }
+  renderDownloadLink() {
+    if (!this.state.downloadLinkVisible) {
+      return null;
+    }
+
+    return (
+      <a ref="downloadLink" className="react-music-download-link">Download</a>
+    );
+  }
   render() {
     return (
       <div>
         <Song
           playing={this.state.playing}
           tempo={90}
+          record
+          onRecordStop={this.handleRecordStop.bind(this)}
         >
           <Analyser onAudioProcess={this.handleAudioProcess}>
             <Sequencer
@@ -94,6 +117,7 @@ export default class Demo extends Component {
 
         <Visualization ref={(c) => { this.visualization = c; }} />
 
+        {this.state.downloadLinkVisible && this.renderDownloadLink()}
         <button
           className="react-music-button"
           type="button"
diff --git a/demo/index.css b/demo/index.css
index 573ac79..6d93664 100644
--- a/demo/index.css
+++ b/demo/index.css
@@ -47,4 +47,4 @@
 .react-music-button:active {
   box-shadow: none;
   border: solid 1px #a7a7a7;
-}
\ No newline at end of file
+}
diff --git a/src/components/song.js b/src/components/song.js
index 987e888..9dc4b35 100644
--- a/src/components/song.js
+++ b/src/components/song.js
@@ -2,11 +2,14 @@
 /* eslint-disable no-loop-func, react/no-did-mount-set-state */
 import React, { Component, PropTypes } from 'react';
 import Scheduler from '../utils/scheduler';
+import Recorder from '../utils/recorder';
 
 type Props = {
   children?: any;
   playing?: boolean;
+  record?: boolean;
   tempo: number;
+  onRecordStop: func;
 };
 
 export default class Song extends Component {
@@ -27,10 +30,13 @@ export default class Song extends Component {
     children: PropTypes.node,
     playing: PropTypes.bool,
     tempo: PropTypes.number,
+    record: PropTypes.bool,
+    onRecordStop: PropTypes.func,
   };
   static defaultProps = {
     playing: false,
     tempo: 90,
+    record: false,
   };
   static childContextTypes = {
     audioContext: PropTypes.object,
@@ -43,7 +49,6 @@ export default class Song extends Component {
   };
   constructor(props: Props) {
     super(props);
-
     this.state = {
       buffersLoaded: false,
     };
@@ -61,10 +66,17 @@ export default class Song extends Component {
 
     window.AudioContext = window.AudioContext || window.webkitAudioContext;
     this.audioContext = new AudioContext();
+    this.destination = this.audioContext.destination;
 
     this.scheduler = new Scheduler({
       context: this.audioContext,
     });
+
+    if (props.record) {
+      this.recorder = new Recorder(this.audioContext, props.onRecordStop);
+      this.recorder.processor.connect(this.destination);
+      this.destination = this.recorder.processor;
+    }
   }
   getChildContext(): Object {
     return {
@@ -72,11 +84,12 @@ export default class Song extends Component {
       audioContext: this.audioContext,
       barInterval: this.barInterval,
       bufferLoaded: this.bufferLoaded,
-      connectNode: this.audioContext.destination,
+      connectNode: this.destination,
       getMaster: this.getMaster,
       scheduler: this.scheduler,
     };
   }
+
   componentDidMount() {
     if (Object.keys(this.buffers).length === 0) {
       this.setState({
@@ -85,6 +98,9 @@ export default class Song extends Component {
     }
   }
   componentWillReceiveProps(nextProps: Props) {
+    if (this.recorder.recording && !nextProps.playing) {
+      this.recorder.stop();
+    }
     this.barInterval = (60000 / nextProps.tempo) * 4;
   }
   componentDidUpdate(prevProps: Object, prevState: Object) {
diff --git a/src/utils/recorder.js b/src/utils/recorder.js
new file mode 100644
index 0000000..83b3c4c
--- /dev/null
+++ b/src/utils/recorder.js
@@ -0,0 +1,112 @@
+// Much inspired by http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio
+
+// @flow
+export default class Recorder {
+  constructor(context, onRecordStop) {
+    const bufferSize = 2048;
+    this.recording = true;
+    this.processor = context.createScriptProcessor(bufferSize, 2, 2);
+    this.processor.recordingLength = 0;
+    this.processor.leftChannel = [];
+    this.processor.rightChannel = [];
+    this.onRecordStop = onRecordStop;
+
+    this.processor.onaudioprocess = function (e) {
+      const left = e.inputBuffer.getChannelData(0);
+      const right = e.inputBuffer.getChannelData(1);
+      // we clone the samples
+      this.leftChannel.push(new Float32Array(left));
+      this.rightChannel.push(new Float32Array(right));
+      this.recordingLength += bufferSize;
+    }.bind(this.processor);
+
+    this.processor.stop = function () {
+      this.recording = false;
+      const left = mergeBuffers(this.processor.leftChannel, this.processor.recordingLength);
+      const right = mergeBuffers(this.processor.rightChannel, this.processor.recordingLength);
+      const interleavedChannels = interleave(left, right);
+      const blob = getWAV(interleavedChannels, context.sampleRate);
+
+      this.processor.disconnect();
+      this.onRecordStop(blob);
+    }.bind(this);
+  }
+
+  stop() {
+    this.processor.stop();
+  }
+
+  connect(node) {
+    this.processor.connect(node);
+  }
+}
+
+function mergeBuffers(channelBuffer, recordingLength) {
+  const result = new Float32Array(recordingLength);
+  let offset = 0;
+  const lng = channelBuffer.length;
+  for (let i = 0; i < lng; i++) {
+    const buffer = channelBuffer[i];
+    result.set(buffer, offset);
+    offset += buffer.length;
+  }
+  return result;
+}
+
+function interleave(leftChannel, rightChannel) {
+  const length = leftChannel.length + rightChannel.length;
+  const result = new Float32Array(length);
+
+  let inputIndex = 0;
+
+  for (let index = 0; index < length;) {
+    result[index++] = leftChannel[inputIndex];
+    result[index++] = rightChannel[inputIndex];
+    inputIndex++;
+  }
+  return result;
+}
+
+function writeUTFBytes(view, offset, string) {
+  const lng = string.length;
+  for (let i = 0; i < lng; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
+
+function getWAV(interleaved, sampleRate) {
+  // create the buffer and view to create the .WAV file
+  const buffer = new ArrayBuffer(44 + interleaved.length * 2);
+  const view = new DataView(buffer);
+
+  // write the WAV container, check spec at: https://ccrma.stanford.edu/courses/422/projects/WaveFormat/
+  // RIFF chunk descriptor
+  writeUTFBytes(view, 0, 'RIFF');
+  view.setUint32(4, 44 + interleaved.length * 2, true);
+  writeUTFBytes(view, 8, 'WAVE');
+  // FMT sub-chunk
+  writeUTFBytes(view, 12, 'fmt ');
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  // stereo (2 channels)
+  view.setUint16(22, 2, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * 4, true);
+  view.setUint16(32, 4, true);
+  view.setUint16(34, 16, true);
+  // data sub-chunk
+  writeUTFBytes(view, 36, 'data');
+  view.setUint32(40, interleaved.length * 2, true);
+
+  // write the PCM samples
+  const lng = interleaved.length;
+  const volume = 1;
+  let index = 44;
+  for (let i = 0; i < lng; i++) {
+    view.setInt16(index, interleaved[i] * (0x7FFF * volume), true);
+    index += 2;
+  }
+
+  // our final binary blob that we can hand off
+  return new Blob([view], { type: 'audio/wav' });
+}

From 25ff91b0934a1fed46965bed791c5e2fe55e4a8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A4=C3=A4s?= <david_naas@hotmail.com>
Date: Tue, 30 Aug 2016 23:34:28 +0200
Subject: [PATCH 2/5] Make Recorder a wrapping react component

---
 demo/demo.js               | 107 +++++++++++++++++++------------------
 src/components/recorder.js |  62 +++++++++++++++++++++
 src/components/song.js     |  18 +------
 src/index.js               |   2 +
 src/utils/recorder.js      |  60 ++++-----------------
 5 files changed, 129 insertions(+), 120 deletions(-)
 create mode 100644 src/components/recorder.js

diff --git a/demo/demo.js b/demo/demo.js
index 94d84af..80d2fa7 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -6,6 +6,7 @@ import {
   Sequencer,
   Sampler,
   Synth,
+  Recorder
 } from '../src';
 
 import Polysynth from './polysynth';
@@ -59,60 +60,60 @@ export default class Demo extends Component {
         <Song
           playing={this.state.playing}
           tempo={90}
-          record
-          onRecordStop={this.handleRecordStop.bind(this)}
         >
-          <Analyser onAudioProcess={this.handleAudioProcess}>
-            <Sequencer
-              resolution={16}
-              bars={1}
-            >
-              <Sampler
-                sample="samples/kick.wav"
-                steps={[0, 2, 8, 10]}
-              />
-              <Sampler
-                sample="samples/snare.wav"
-                steps={[4, 12]}
-              />
-            </Sequencer>
-            <Sequencer
-              resolution={16}
-              bars={2}
-            >
-              <Polysynth
-                steps={[
-                  [0, 1, ['c3', 'd#3', 'g3' ]],
-                  [2, 1, ['c4']],
-                  [8, 1, ['c3', 'd#3', 'g3']],
-                  [10, 1, ['c4']],
-                  [12, 1, ['c3', 'd#3', 'g3']],
-                  [14, 1, ['d#4']],
-                  [16, 1, ['f3', 'g#3', 'c4']],
-                  [18, 1, ['f3', 'g#3', 'c4']],
-                  [24, 1, ['f3', 'g#3', 'c4']],
-                  [26, 1, ['f3', 'g#3', 'c4']],
-                  [28, 1, ['f3', 'g#3', 'c4']],
-                  [30, 1, ['f3', 'g#3', 'c4']],
-                ]}
-              />
-            </Sequencer>
-            <Sequencer
-              resolution={16}
-              bars={2}
-            >
-              <Synth
-                type="sine"
-                steps={[
-                  [0, 8, 'c2'],
-                  [8, 4, 'c2'],
-                  [12, 4, 'd#2'],
-                  [16, 8, 'f2'],
-                  [24, 8, 'f1'],
-                ]}
-              />
-            </Sequencer>
-          </Analyser>
+          <Recorder onRecordStop={this.handleRecordStop.bind(this)} isRecording={this.state.playing}>
+            <Analyser onAudioProcess={this.handleAudioProcess}>
+              <Sequencer
+                resolution={16}
+                bars={1}
+              >
+                <Sampler
+                  sample="samples/kick.wav"
+                  steps={[0, 2, 8, 10]}
+                />
+                <Sampler
+                  sample="samples/snare.wav"
+                  steps={[4, 12]}
+                />
+              </Sequencer>
+              <Sequencer
+                resolution={16}
+                bars={2}
+              >
+                <Polysynth
+                  steps={[
+                    [0, 1, ['c3', 'd#3', 'g3' ]],
+                    [2, 1, ['c4']],
+                    [8, 1, ['c3', 'd#3', 'g3']],
+                    [10, 1, ['c4']],
+                    [12, 1, ['c3', 'd#3', 'g3']],
+                    [14, 1, ['d#4']],
+                    [16, 1, ['f3', 'g#3', 'c4']],
+                    [18, 1, ['f3', 'g#3', 'c4']],
+                    [24, 1, ['f3', 'g#3', 'c4']],
+                    [26, 1, ['f3', 'g#3', 'c4']],
+                    [28, 1, ['f3', 'g#3', 'c4']],
+                    [30, 1, ['f3', 'g#3', 'c4']],
+                  ]}
+                />
+              </Sequencer>
+              <Sequencer
+                resolution={16}
+                bars={2}
+              >
+                <Synth
+                  type="sine"
+                  steps={[
+                    [0, 8, 'c2'],
+                    [8, 4, 'c2'],
+                    [12, 4, 'd#2'],
+                    [16, 8, 'f2'],
+                    [24, 8, 'f1'],
+                  ]}
+                />
+              </Sequencer>
+            </Analyser>
+          </Recorder>
         </Song>
 
         <Visualization ref={(c) => { this.visualization = c; }} />
diff --git a/src/components/recorder.js b/src/components/recorder.js
new file mode 100644
index 0000000..6a2770c
--- /dev/null
+++ b/src/components/recorder.js
@@ -0,0 +1,62 @@
+import React, { PropTypes, Component } from 'react';
+import { getWAV, interleave, mergeBuffers } from '../utils/recorder';
+
+// @flow
+export default class Recorder extends Component {
+  static contextTypes = {
+    audioContext: PropTypes.object,
+    connectNode: PropTypes.object,
+  };
+  static childContextTypes = {
+    audioContext: PropTypes.object,
+    connectNode: PropTypes.object,
+  };
+  constructor(props: Props, context: Context) {
+    super(props);
+
+    const bufferSize = 2048;
+    this.isRecording = props.isRecording;
+    this.processor = context.audioContext.createScriptProcessor(bufferSize, 2, 2);
+    this.processor.recordingLength = 0;
+    this.processor.leftChannel = [];
+    this.processor.rightChannel = [];
+    this.onRecordStop = props.onRecordStop;
+
+    this.processor.onaudioprocess = (e) => {
+      const left = e.inputBuffer.getChannelData(0);
+      const right = e.inputBuffer.getChannelData(1);
+      // we clone the samples
+      this.processor.leftChannel.push(new Float32Array(left));
+      this.processor.rightChannel.push(new Float32Array(right));
+      this.processor.recordingLength += bufferSize;
+    };
+
+    this.processor.stop = () => {
+      this.isRecording = false;
+      const left = mergeBuffers(this.processor.leftChannel, this.processor.recordingLength);
+      const right = mergeBuffers(this.processor.rightChannel, this.processor.recordingLength);
+      const interleavedChannels = interleave(left, right);
+      const blob = getWAV(interleavedChannels, context.audioContext.sampleRate);
+
+      this.processor.disconnect();
+      this.onRecordStop(blob);
+    };
+
+    this.connectNode = this.processor;
+    this.connectNode.connect(context.connectNode);
+  }
+  getChildContext(): Object {
+    return {
+      ...this.context,
+      connectNode: this.connectNode,
+    };
+  }
+  componentWillReceiveProps(nextProps: Props) {
+    if (this.props.isRecording && !nextProps.isRecording) {
+      this.processor.stop();
+    }
+  }
+  render(): React.Element<any> {
+    return <span>{this.props.children}</span>;
+  }
+}
diff --git a/src/components/song.js b/src/components/song.js
index 9dc4b35..3223b66 100644
--- a/src/components/song.js
+++ b/src/components/song.js
@@ -2,14 +2,11 @@
 /* eslint-disable no-loop-func, react/no-did-mount-set-state */
 import React, { Component, PropTypes } from 'react';
 import Scheduler from '../utils/scheduler';
-import Recorder from '../utils/recorder';
 
 type Props = {
   children?: any;
   playing?: boolean;
-  record?: boolean;
   tempo: number;
-  onRecordStop: func;
 };
 
 export default class Song extends Component {
@@ -30,13 +27,10 @@ export default class Song extends Component {
     children: PropTypes.node,
     playing: PropTypes.bool,
     tempo: PropTypes.number,
-    record: PropTypes.bool,
-    onRecordStop: PropTypes.func,
   };
   static defaultProps = {
     playing: false,
     tempo: 90,
-    record: false,
   };
   static childContextTypes = {
     audioContext: PropTypes.object,
@@ -66,17 +60,10 @@ export default class Song extends Component {
 
     window.AudioContext = window.AudioContext || window.webkitAudioContext;
     this.audioContext = new AudioContext();
-    this.destination = this.audioContext.destination;
 
     this.scheduler = new Scheduler({
       context: this.audioContext,
     });
-
-    if (props.record) {
-      this.recorder = new Recorder(this.audioContext, props.onRecordStop);
-      this.recorder.processor.connect(this.destination);
-      this.destination = this.recorder.processor;
-    }
   }
   getChildContext(): Object {
     return {
@@ -84,7 +71,7 @@ export default class Song extends Component {
       audioContext: this.audioContext,
       barInterval: this.barInterval,
       bufferLoaded: this.bufferLoaded,
-      connectNode: this.destination,
+      connectNode: this.audioContext.destination,
       getMaster: this.getMaster,
       scheduler: this.scheduler,
     };
@@ -98,9 +85,6 @@ export default class Song extends Component {
     }
   }
   componentWillReceiveProps(nextProps: Props) {
-    if (this.recorder.recording && !nextProps.playing) {
-      this.recorder.stop();
-    }
     this.barInterval = (60000 / nextProps.tempo) * 4;
   }
   componentDidUpdate(prevProps: Object, prevState: Object) {
diff --git a/src/index.js b/src/index.js
index 6f672e3..af52175 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,6 +16,7 @@ import Sequencer from './components/sequencer.js';
 import Sampler from './components/sampler.js';
 import Song from './components/song.js';
 import Synth from './components/synth.js';
+import Recorder from './components/recorder.js';
 
 export {
   Analyser,
@@ -36,4 +37,5 @@ export {
   Sampler,
   Song,
   Synth,
+  Recorder,
 };
diff --git a/src/utils/recorder.js b/src/utils/recorder.js
index 83b3c4c..83d1726 100644
--- a/src/utils/recorder.js
+++ b/src/utils/recorder.js
@@ -1,47 +1,6 @@
 // Much inspired by http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio
 
-// @flow
-export default class Recorder {
-  constructor(context, onRecordStop) {
-    const bufferSize = 2048;
-    this.recording = true;
-    this.processor = context.createScriptProcessor(bufferSize, 2, 2);
-    this.processor.recordingLength = 0;
-    this.processor.leftChannel = [];
-    this.processor.rightChannel = [];
-    this.onRecordStop = onRecordStop;
-
-    this.processor.onaudioprocess = function (e) {
-      const left = e.inputBuffer.getChannelData(0);
-      const right = e.inputBuffer.getChannelData(1);
-      // we clone the samples
-      this.leftChannel.push(new Float32Array(left));
-      this.rightChannel.push(new Float32Array(right));
-      this.recordingLength += bufferSize;
-    }.bind(this.processor);
-
-    this.processor.stop = function () {
-      this.recording = false;
-      const left = mergeBuffers(this.processor.leftChannel, this.processor.recordingLength);
-      const right = mergeBuffers(this.processor.rightChannel, this.processor.recordingLength);
-      const interleavedChannels = interleave(left, right);
-      const blob = getWAV(interleavedChannels, context.sampleRate);
-
-      this.processor.disconnect();
-      this.onRecordStop(blob);
-    }.bind(this);
-  }
-
-  stop() {
-    this.processor.stop();
-  }
-
-  connect(node) {
-    this.processor.connect(node);
-  }
-}
-
-function mergeBuffers(channelBuffer, recordingLength) {
+export function mergeBuffers(channelBuffer, recordingLength) {
   const result = new Float32Array(recordingLength);
   let offset = 0;
   const lng = channelBuffer.length;
@@ -53,7 +12,7 @@ function mergeBuffers(channelBuffer, recordingLength) {
   return result;
 }
 
-function interleave(leftChannel, rightChannel) {
+export function interleave(leftChannel, rightChannel) {
   const length = leftChannel.length + rightChannel.length;
   const result = new Float32Array(length);
 
@@ -67,14 +26,8 @@ function interleave(leftChannel, rightChannel) {
   return result;
 }
 
-function writeUTFBytes(view, offset, string) {
-  const lng = string.length;
-  for (let i = 0; i < lng; i++) {
-    view.setUint8(offset + i, string.charCodeAt(i));
-  }
-}
 
-function getWAV(interleaved, sampleRate) {
+export function getWAV(interleaved, sampleRate) {
   // create the buffer and view to create the .WAV file
   const buffer = new ArrayBuffer(44 + interleaved.length * 2);
   const view = new DataView(buffer);
@@ -110,3 +63,10 @@ function getWAV(interleaved, sampleRate) {
   // our final binary blob that we can hand off
   return new Blob([view], { type: 'audio/wav' });
 }
+
+function writeUTFBytes(view, offset, string) {
+  const lng = string.length;
+  for (let i = 0; i < lng; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
\ No newline at end of file

From 8296270e9a4d24bc46178bb7f6795f5f3b44aacc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A4=C3=A4s?= <david_naas@hotmail.com>
Date: Wed, 31 Aug 2016 00:12:26 +0200
Subject: [PATCH 3/5] Fix linting errors

---
 src/components/recorder.js | 21 ++++++++++++++++++++-
 src/utils/recorder.js      | 27 ++++++++++++++-------------
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/components/recorder.js b/src/components/recorder.js
index 6a2770c..8823c56 100644
--- a/src/components/recorder.js
+++ b/src/components/recorder.js
@@ -1,8 +1,27 @@
+// @flow
 import React, { PropTypes, Component } from 'react';
 import { getWAV, interleave, mergeBuffers } from '../utils/recorder';
 
-// @flow
+type Props = {
+  children?: any;
+  onRecordStop?: Function;
+  smoothingTimeConstant?: number;
+  isRecording?: boolean
+};
+
+type Context = {
+  audioContext: Object;
+  connectNode: Object;
+};
+
 export default class Recorder extends Component {
+  context: Context;
+  props: Props;
+  static propTypes = {
+    children: PropTypes.node,
+    isRecording: PropTypes.bool,
+    onRecordStop: PropTypes.func,
+  };
   static contextTypes = {
     audioContext: PropTypes.object,
     connectNode: PropTypes.object,
diff --git a/src/utils/recorder.js b/src/utils/recorder.js
index 83d1726..10dfe75 100644
--- a/src/utils/recorder.js
+++ b/src/utils/recorder.js
@@ -1,6 +1,6 @@
 // Much inspired by http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio
 
-export function mergeBuffers(channelBuffer, recordingLength) {
+export const mergeBuffers = function (channelBuffer, recordingLength) {
   const result = new Float32Array(recordingLength);
   let offset = 0;
   const lng = channelBuffer.length;
@@ -10,9 +10,9 @@ export function mergeBuffers(channelBuffer, recordingLength) {
     offset += buffer.length;
   }
   return result;
-}
+};
 
-export function interleave(leftChannel, rightChannel) {
+export const interleave = function (leftChannel, rightChannel) {
   const length = leftChannel.length + rightChannel.length;
   const result = new Float32Array(length);
 
@@ -24,10 +24,18 @@ export function interleave(leftChannel, rightChannel) {
     inputIndex++;
   }
   return result;
-}
+};
 
+const writeUTFBytes = function (view, offset, string) {
+  const lng = string.length;
+  for (let i = 0; i < lng; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+};
 
-export function getWAV(interleaved, sampleRate) {
+// Disabling since it's a higly specialised function
+/* eslint-disable max-statements */
+export const getWAV = function (interleaved, sampleRate) {
   // create the buffer and view to create the .WAV file
   const buffer = new ArrayBuffer(44 + interleaved.length * 2);
   const view = new DataView(buffer);
@@ -62,11 +70,4 @@ export function getWAV(interleaved, sampleRate) {
 
   // our final binary blob that we can hand off
   return new Blob([view], { type: 'audio/wav' });
-}
-
-function writeUTFBytes(view, offset, string) {
-  const lng = string.length;
-  for (let i = 0; i < lng; i++) {
-    view.setUint8(offset + i, string.charCodeAt(i));
-  }
-}
\ No newline at end of file
+};

From f710e4540dacd7f75ca5a123c9c94553984a812d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A4=C3=A4s?= <david_naas@hotmail.com>
Date: Thu, 1 Sep 2016 21:29:11 +0200
Subject: [PATCH 4/5] Revert "Add hot reloading"

This reverts commit 93eb48db10fa20fb759b645361a93ea9c4474116.
---
 demo/index.js         | 15 +--------------
 package.json          |  3 +--
 webpack.config.dev.js |  3 +--
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/demo/index.js b/demo/index.js
index 67bb539..c8aede6 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -1,21 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Demo from './demo';
-import { AppContainer } from 'react-hot-loader';
 
 ReactDOM.render(
-  <AppContainer>
-    <Demo />
-  </AppContainer>,
+  <Demo />,
   document.getElementById('root')
 );
-
-module.hot.accept('./demo', () => {
-  const NextDemo = require('./demo').default;
-  ReactDOM.render(
-    <AppContainer>
-      <NextDemo />
-    </AppContainer>,
-    document.getElementById('root')
-  );
-});
diff --git a/package.json b/package.json
index 43ba706..c1bde81 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "umd"
   ],
   "scripts": {
-    "start": "webpack-dev-server --hot --inline --port 3000 --config webpack.config.dev.js --content-base public/",
+    "start": "webpack-dev-server --inline --port 3000 --config webpack.config.dev.js --content-base public/",
     "build": "babel src -d lib --copy-files",
     "clean": "rimraf dist",
     "clean-umd": "rimraf umd",
@@ -52,7 +52,6 @@
     "postcss-loader": "^0.10.1",
     "react": "^15.2.1",
     "react-dom": "^15.2.1",
-    "react-hot-loader": "^3.0.0-beta.2",
     "rimraf": "^2.5.4",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.1",
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 47323fd..c52a6b6 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -3,7 +3,6 @@ const webpack = require('webpack');
 
 module.exports = {
   entry: [
-    'react-hot-loader/patch',
     './demo/index',
   ],
   output: {
@@ -17,7 +16,7 @@ module.exports = {
   module: {
     loaders: [{
       test: /\.js$/,
-      loader: 'babel?plugins=react-hot-loader/babel',
+      loaders: ['babel'],
       include: [
         path.join(__dirname, 'src'),
         path.join(__dirname, 'demo'),

From 6dc90d3ac0bfefc285b66311530967b265250dc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A4=C3=A4s?= <david_naas@hotmail.com>
Date: Thu, 1 Sep 2016 22:22:04 +0200
Subject: [PATCH 5/5] Fix recorder muting audio

---
 src/components/recorder.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/recorder.js b/src/components/recorder.js
index 8823c56..cf0b1f4 100644
--- a/src/components/recorder.js
+++ b/src/components/recorder.js
@@ -42,12 +42,20 @@ export default class Recorder extends Component {
     this.onRecordStop = props.onRecordStop;
 
     this.processor.onaudioprocess = (e) => {
-      const left = e.inputBuffer.getChannelData(0);
-      const right = e.inputBuffer.getChannelData(1);
+      const leftIn = e.inputBuffer.getChannelData(0);
+      const rightIn = e.inputBuffer.getChannelData(1);
       // we clone the samples
-      this.processor.leftChannel.push(new Float32Array(left));
-      this.processor.rightChannel.push(new Float32Array(right));
+      this.processor.leftChannel.push(new Float32Array(leftIn));
+      this.processor.rightChannel.push(new Float32Array(rightIn));
       this.processor.recordingLength += bufferSize;
+
+      // propagate samples to output
+      const leftOut = e.outputBuffer.getChannelData(0);
+      const rightOut = e.outputBuffer.getChannelData(1);
+      for (var i = 0; i < leftIn.length; i++) {
+        leftOut[i] = leftIn[i];
+        rightOut[i] = rightIn[i];
+      }
     };
 
     this.processor.stop = () => {