added demo.wav, loading audio files works basically

mspae · Dec 28, 2015 · 7d061bb · 7d061bb
1 parent 3b9ca11
commit 7d061bb
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,6 @@
   <body>
     <div id='app'>
     </div>
-    <script src="/vendor/wavesurfer-bundle.js"></script>
     <script src="/src/bundle.js"></script>
   </body>
 </html>
diff --git a/index.jsx b/index.jsx
@@ -5,6 +5,6 @@ import Wavesurfer from './src/react-wavesurfer';
 
 ReactDOM.render(
   <div>
-    <Wavesurfer />
+    <Wavesurfer audioFile='/resources/demo.wav' />
   </div>
   , document.getElementById('app'));
diff --git a/resources/demo.wav b/resources/demo.wav
diff --git a/src/react-wavesurfer.js b/src/react-wavesurfer.js
@@ -1,7 +1,10 @@
 /* global WaveSurfer */
 import React, {PropTypes} from 'react';
 
-const WaveSurfer = WaveSurfer || {};
+// either use an already included WaveSurfer, or import it here
+// the bundle file is built with `npm run wavesurfer`, this is
+// necessary for testing
+const WaveSurfer = WaveSurfer || require('../vendor/wavesurfer-bundle.js');
 
 const EVENTS = [
   'audioprocess',
@@ -40,23 +43,50 @@ class Wavesurfer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {};
-    console.log(WaveSurfer);
     if (typeof WaveSurfer === undefined) {
       throw new Error('WaveSurfer is undefined! Either include the Wavesurfer file(s) in a script tag before the react-wavesurfer component or require/import it (but be sure to append module.exports = WaveSurfer; to the Wavesurfer bundle file as it only exports to window.WaveSurfer by default)');
     }
     this._wavesurfer = Object.create(WaveSurfer);
+
+    this._loadAudio = this._loadAudio.bind(this);
   }
 
   componentDidMount() {
     let options = Object.assign({}, {
       container: this.refs.wavesurfer
     }, this.props.options);
+
     this._wavesurfer.init(options);
 
     EVENTS.forEach((e) => {
-      let callbackPropName = 'on' + capitaliseFirstLetter(e);
-      this._wavesurfer.on(e, this.props[callbackPropName]);
+      let propCallback = this.props['on' + capitaliseFirstLetter(e)];
+      if (propCallback) {
+        this._wavesurfer.on(e, propCallback);
+      }
     });
+
+    if (this.props.audioFile) {
+      this._loadAudio(this.props.audioFile);
+    }
+  }
+
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.audioFile !== nextProps.audioFile) {
+      this._loadAudio(nextProps.audioFile);
+    }
+  }
+
+  _loadAudio(audioFile) {
+    // bog-standard string is handled by load method and ajax call
+    if (typeof audioFile === 'string') {
+      this._wavesurfer.load(audioFile);
+    } else if (audioFile instanceof Blob || audioFile instanceof File) {
+      // blob or file is loaded with loadBlob method
+      this._wavesurfer.loadBlob(audioFile);
+    } else {
+      throw new Error('Wavesurfer._loadAudio expexts prop audioFile to be either string or file/blob');
+    }
   }
 
   componentWillUnmount() {
@@ -76,6 +106,14 @@ class Wavesurfer extends React.Component {
 }
 
 Wavesurfer.propTypes = {
+  audioFile: function(props, propName, componentName) {
+    let prop = props[propName];
+
+    if (prop && typeof prop !== 'string' && !prop instanceof Blob && !prop instanceof File) {
+      return new Error('Invalid `' + propName + '` supplied to `' + componentName +
+          '` expected either string or file/blob');
+    }
+  },
   options: PropTypes.shape({
     audioRate: PropTypes.number,
     backend: PropTypes.oneOf(['WebAudio', 'MediaElement']),
@@ -107,6 +145,7 @@ Wavesurfer.propTypes = {
 };
 
 Wavesurfer.defaultProps = {
+  audioFile: undefined,
   options: {
     audioRate: 1,
     backend: 'WebAudio',

diff --git a/test/react-wavesurfer.spec.js b/test/react-wavesurfer.spec.js
@@ -1,8 +1,9 @@
 /* global before, describe, it */
+
 const TestUtils = require('react-addons-test-utils');
 const React = require('react');
 const expect = require('chai').expect;
-const WaveSurfer = require('../vendor/wavesurfer-bundle.js');
+
 const Wavesurfer = require('../src/react-wavesurfer.js');
 
 describe('React Wavesurfer component', () => {

diff --git a/tools/wavesurfer.js b/tools/wavesurfer.js
@@ -6,7 +6,7 @@ fs.readFile('./node_modules/wavesurfer.js/dist/wavesurfer.min.js', (err, data) =
   if (err) {
     throw new Error('Error reading ./node_modules/wavesurfer.js/dist/wavesurfer.min.js', err);
   }
-  exportingWavesurfer += data
+  exportingWavesurfer += data;
   exportingWavesurfer += `
   if (typeof module !== 'undefined') {
     module.exports = WaveSurfer;

diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
@@ -36,7 +36,7 @@ module.exports = {
   module: {
     loaders: [
       { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, '../') },
-      { test: /\.js$/, loader: 'eslint-loader', exclude: /node_modules/ }
+      { test: /\.js$/, loader: 'eslint-loader', exclude: /[node_modules|vendor]/ }
     ]
   }
 };