Add MVP recorder functionality

Author: davidnaas

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
@@ -101,6 +124,7 @@ export default class Demo extends Component {
         >
           {this.state.playing ? 'Stop' : 'Play'}
         </button>
+        {this.state.downloadLinkVisible && this.renderDownloadLink()}
       </div>
     );
   }

demo/index.css

@@ -47,4 +47,4 @@
 .react-music-button:active {
   box-shadow: none;
   border: solid 1px #a7a7a7;
-}
+}

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,22 +66,30 @@ 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 {
       tempo: this.props.tempo,
       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) {

src/utils/recorder.js

@@ -0,0 +1,126 @@
+// 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);
+      // blobToBase64(blob, (base64) => {
+      //   cb(base64);
+      // });
+    }.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' });
+}
+
+// found on stackoverflow
+function blobToBase64(blob, cb) {
+  const reader = new FileReader();
+  reader.onload = function () {
+    const dataUrl = reader.result;
+    const base64 = dataUrl.split(',')[1];
+    cb(base64);
+  };
+  reader.readAsDataURL(blob);
+}