Play/Pause/Stop buttons

src/components/App.jsx

@@ -3,13 +3,16 @@ const React = require('react');
 const {SimpleFilter, SoundTouch} = require('../lib/soundtouch');
 const ErrorAlert = require('./ErrorAlert.jsx');
 const FilenameLabel = require('./FilenameLabel.jsx');
+const TrackControls = require('./TrackControls.jsx');
+
+const BUFFER_SIZE = 4096;
 
 class App extends React.Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            bufferSource: undefined,
+            action: 'stop',
             error: undefined,
             filename: undefined,
             pitch: 0.8,
@@ -18,6 +21,7 @@ class App extends React.Component {
         };
 
         this.audioContext = new AudioContext();
+        this.scriptProcessor = this.audioContext.createScriptProcessor(BUFFER_SIZE, 2, 2);
 
         this.soundTouch = new SoundTouch();
         this.soundTouch.pitch = this.state.pitch;
@@ -34,16 +38,13 @@ class App extends React.Component {
         });
     }
 
-
-    playSound(buffer) {
+    setBuffer(buffer) {
         const bufferSource = this.audioContext.createBufferSource();
         bufferSource.buffer = buffer;
 
-        const BUFFER_SIZE = 4096;
-        const node = this.audioContext.createScriptProcessor(BUFFER_SIZE, 2, 2);
         const samples = new Float32Array(BUFFER_SIZE * 2);
 
-        const source = {
+        this.source = {
             extract: (target, numFrames, position) => {
                 const l = buffer.getChannelData(0);
                 const r = buffer.getChannelData(1);
@@ -54,34 +55,45 @@ class App extends React.Component {
                 return Math.min(numFrames, l.length - position);
             },
         };
-        const f = new SimpleFilter(source, this.soundTouch);
-
-        node.onaudioprocess = e => {
+        this.f = new SimpleFilter(this.source, this.soundTouch);
+        this.scriptProcessor.onaudioprocess = e => {
             const l = e.outputBuffer.getChannelData(0);
             const r = e.outputBuffer.getChannelData(1);
-            const framesExtracted = f.extract(samples, BUFFER_SIZE);
+            const framesExtracted = this.f.extract(samples, BUFFER_SIZE);
             if (framesExtracted === 0) {
-                node.disconnect(this.audioContext.destination);
+                this.pause();
             }
             for (let i = 0; i < framesExtracted; i++) {
                 l[i] = samples[i * 2];
                 r[i] = samples[i * 2 + 1];
             }
         };
 
-        node.connect(this.audioContext.destination);
-//        bufferSource.connect(this.audioContext.destination);
-//        bufferSource.start(0);
+        this.play();
+    }
+
+    play() {
+        if (this.state.action !== 'play') {
+            this.scriptProcessor.connect(this.audioContext.destination);
+            this.emitter.emit('state', {action: 'play'});
+        }
+    }
 
-        this.setState({bufferSource});
+    pause() {
+        if (this.state.action === 'play') {
+            this.scriptProcessor.disconnect(this.audioContext.destination);
+            this.emitter.emit('state', {action: 'pause'});
+        }
+    }
+
+    stop() {
+        this.pause();
+        this.f.sourcePosition = 0;
+        this.emitter.emit('state', {action: 'stop'});
     }
 
     handleFileChange(e) {
         if (e.target.files.length > 0) {
-            if (this.state.bufferSource) {
-                this.state.bufferSource.stop();
-            }
-
             this.emitter.emit('status', 'Reading file...');
             this.emitter.emit('state', {
                 error: undefined,
@@ -113,24 +125,20 @@ class App extends React.Component {
                     return;
                 }
 
-                this.playSound(buffer);
+                this.setBuffer(buffer);
             };
         }
     }
 
     handlePitchChange(e) {
         const pitch = e.target.value;
-        if (this.state.bufferSource) {
-            this.soundTouch.pitch = pitch;
-        }
+        this.soundTouch.pitch = pitch;
         this.setState({pitch});
     }
 
     handleTempoChange(e) {
         const tempo = e.target.value;
-        if (this.state.bufferSource) {
-            this.soundTouch.tempo = tempo;
-        }
+        this.soundTouch.tempo = tempo;
         this.setState({tempo});
     }
 
@@ -154,36 +162,61 @@ class App extends React.Component {
                     </label>
                     <FilenameLabel error={this.state.error} filename={this.state.filename} />
                 </div>
+
                 <ErrorAlert error={this.state.error} />
+
                 <div className="row">
-                    <div className="col-sm-3 col-md-2" style={{paddingTop: '7px'}}>
+                    <div className="col-xs-5 col-sm-3 col-lg-2" style={{paddingTop: '7px'}}>
+                        <TrackControls
+                            action={this.state.action}
+                            error={this.state.error}
+                            filename={this.state.filename}
+                            onPlay={() => this.play()}
+                            onPause={() => this.pause()}
+                            onStop={() => this.stop()}
+                        />
+                    </div>
+                    <div className="col-xs-7 col-sm-9 col-lg-10">
+                        <input
+                            className="form-control"
+                            type="range"
+                            min="0.05"
+                            max="2"
+                            step="0.05"
+                            defaultValue={this.state.pitch}
+                            onChange={e => this.handlePitchChange(e)}
+                        />
+                    </div>
+                </div>
+
+                <div className="row">
+                    <div className="col-xs-5 col-sm-3 col-lg-2" style={{paddingTop: '7px'}}>
                         Pitch ({this.state.pitch}x)
                     </div>
-                    <div className="col-sm-9 col-md-10">
+                    <div className="col-xs-7 col-sm-9 col-lg-10">
                         <input
                             className="form-control"
-                            id="speed-slider"
                             type="range"
-                            min="0.1"
+                            min="0.05"
                             max="2"
-                            step="0.1"
+                            step="0.05"
                             defaultValue={this.state.pitch}
                             onChange={e => this.handlePitchChange(e)}
                         />
                     </div>
                 </div>
+
                 <div className="row">
-                    <div className="col-sm-3 col-md-2" style={{paddingTop: '7px'}}>
+                    <div className="col-xs-5 col-sm-3 col-lg-2" style={{paddingTop: '7px'}}>
                         Tempo ({this.state.tempo}x)
                     </div>
-                    <div className="col-sm-9 col-md-10">
+                    <div className="col-xs-7 col-sm-9 col-lg-10">
                         <input
                             className="form-control"
-                            id="speed-slider"
                             type="range"
-                            min="0.1"
+                            min="0.05"
                             max="2"
-                            step="0.1"
+                            step="0.05"
                             defaultValue={this.state.tempo}
                             onChange={e => this.handleTempoChange(e)}
                         />

src/components/TrackControls.jsx

@@ -0,0 +1,57 @@
+const React = require('react');
+
+const TrackControls = props => {
+    const disabled = props.error !== undefined || props.filename === undefined;
+console.log(disabled, props);
+
+    let playOrPause;
+    if (props.action === 'play') {
+        playOrPause = (
+            <button
+                className="btn btn-secondary btn-sm"
+                disabled={disabled}
+                onClick={props.onPause}
+            >
+                Pause
+            </button>
+        );
+    } else {
+        playOrPause = (
+            <button
+                className="btn btn-secondary btn-sm"
+                disabled={disabled}
+                onClick={props.onPlay}
+            >
+                Play
+            </button>
+        );
+    }
+
+    return (
+        <div>
+            {playOrPause}
+            <button
+                className="btn btn-secondary btn-sm"
+                disabled={disabled}
+                onClick={props.onStop}
+                style={{marginLeft: '0.25em'}}
+            >
+                Stop
+            </button>
+        </div>
+    );
+};
+
+TrackControls.propTypes = {
+    action: React.PropTypes.string,
+    error: React.PropTypes.shape({
+        type: React.PropTypes.string.isRequired,
+        message: React.PropTypes.string.isRequired,
+    }),
+    filename: React.PropTypes.string,
+    onPause: React.PropTypes.func,
+    onPlay: React.PropTypes.func,
+    onStop: React.PropTypes.func,
+};
+
+module.exports = TrackControls;

src/css/my.css

@@ -1,4 +1,4 @@
 .filename-label {
   padding-top: 16px;
   vertical-align: 2px;
-}
+}

src/lib/soundtouch.js

@@ -240,7 +240,7 @@ FifoSampleBuffer.prototype = {
     },
 
     clear: function() {
-        this.receive(frameCount);
+        this.receive(this._frameCount);
         this.rewind();
     },
 
@@ -1003,8 +1003,8 @@ function SoundTouch() {
 
 extend(SoundTouch.prototype, {
     clear: function () {
-        rateTransposer.clear();
-        tdStretch.clear();
+        this.rateTransposer.clear();
+        this.tdStretch.clear();
     },
 
     clone: function () {
@@ -1108,5 +1108,6 @@ extend(SoundTouch.prototype, {
     }
 });
 
-// This is the only part that was added for screw
+// This is the only part that was added for screw (plus fixing a couple typos where `this` was
+// erroneously not used)
 module.exports = {SimpleFilter, SoundTouch};