jonoliver · jonoliver · Aug 26, 2018 · Sep 2, 2018 · Aug 10, 2018 · Sep 4, 2018
diff --git a/build/sequencer.76cc1f0b.js b/build/sequencer.76cc1f0b.js
diff --git a/build/sequencer.76cc1f0b.map b/build/sequencer.76cc1f0b.map
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <main id="app"></main>
+    <script src="js/recorderjs/recorderWorker.js"></script>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -2,11 +2,6 @@ import React from "react";
 import { render } from "react-dom";
 import Main from "./js";
 import "./scss";
-import { Transport } from 'tone';
-
-document.addEventListener('keyup', ({ code }) => {
-  if (code === 'Space') Transport.toggle();
-});
 
 const patternLength = 16;
 const scaleLength = 11;

diff --git a/js/adapters.js b/js/adapters.js
@@ -1,5 +1,5 @@
 export const attack = (n => n * 0.01 * 0.5);
-export const sustain = (n => n * 0.01);
-export const decay = (n => n * 0.01);
-export const release = (n => n * 0.1 * 0.2);
+export const sustain = (n => n * 0.1);
+export const decay = (n => n * 0.1);
+export const release = (n => n * 0.1);
 export const hold = (n => n * 0.01);
diff --git a/js/controls.js b/js/controls.js
@@ -1,6 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import ReactSelect from 'react-select';
+import { Transport } from 'tone';
+import { debounce } from 'lodash';
 import { Consumer } from './context';
+import * as Recorder from './recorder';
 
 const Cell = ({ active, x, y }) =>
   <Consumer>
@@ -45,4 +48,155 @@ export class Select extends Component {
   render(){
     return <ReactSelect {...this.props } />
   }
-}
+}
+
+export class PlayButton extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPlaying: true,
+    };
+    this.togglePlay = this.togglePlay.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('keyup', (event) => {
+      if (event.code === 'Space') {
+        event.preventDefault();
+        this.togglePlay();
+      }
+    });
+  }
+
+  togglePlay(){
+    this.setState(({ isPlaying }) => {
+      Transport.toggle();
+      return { isPlaying: !isPlaying };
+    });
+  }
+
+  render(){
+    const { isPlaying } = this.state;
+    return (
+      <button
+        onClick={this.togglePlay}
+        className={isPlaying ? 'play' : 'pause'}
+      >
+      </button>
+    )
+  }
+}
+
+export class RecordButton extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      isRecording: false,
+      url: null,
+    }
+    this.toggleRecord = this.toggleRecord.bind(this);
+    this.setLink = this.setLink.bind(this);
+  }
+
+  setLink(url){
+    this.setState({ url });
+  }
+
+
+  toggleRecord(){
+    this.setState(({ isRecording }) => {
+      if (isRecording) {
+        Recorder.stop(this.setLink);
+      } else {
+        Recorder.record();
+      }
+
+      return { isRecording: !isRecording };
+    });
+  }
+
+  render(){
+    const { isRecording, url } = this.state;
+    return (
+      <Fragment>
+        <button
+          onClick={this.toggleRecord}
+          className={`record ${isRecording ? 'active' : ''}`}
+        >
+        </button>
+        {
+          url && <a
+            href={url}
+            download='output.wav'
+          ></a>
+        }
+      </Fragment>
+    )
+  }
+}
+
+const setTransportBPM = debounce((value) => {
+  Transport.pause();
+  Transport.bpm.value = value;
+  Transport.start();
+}, 300);
+
+export class BpmInput extends Component {
+
+  constructor(props){
+    super(props);
+    this.state = {
+      ...props,
+      isKeyPressed: false,
+    };
+    this.bpmMax = 300;
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount(){
+    Tone.Transport.start();
+  }
+
+  onKeyDown(event){
+    if (event.key === 'ArrowUp') return;
+    if (event.key === 'ArrowDown') return;
+    this.setState({ isKeyPressed: true });
+  }
+
+  onKeyUp(event){
+    const { value } = event.target;
+    event.preventDefault();
+    const shouldUpdateBPM = value && event.key === 'Enter';
+    this.setState({ isKeyPressed: false }, () => {
+      if (shouldUpdateBPM) {
+        setTransportBPM(value);
+      }
+    });
+  }
+
+  onChange(event) {
+    let { value } = event.target;
+    const { bpmMax } = this;
+    if (value > bpmMax) value = bpmMax;
+    this.setState({ bpm: value });
+    if (!this.state.isKeyPressed) {
+      setTransportBPM(value);
+    }
+  }
+
+  render() {
+    const { bpm } = this.state;
+    return (
+      <input type="number"
+        value={bpm}
+        min={1}
+        max={this.bpmMax}
+        onKeyDown={this.onKeyDown}
+        onKeyUp={this.onKeyUp}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
diff --git a/js/index.js b/js/index.js
@@ -2,8 +2,8 @@ import React, { Component } from "react";
 import Scale, { get, names } from 'music-scale';
 import { cloneDeep } from 'lodash';
 import { Provider } from './context';
-import { Grid, Slider, Select } from './controls';
-import { play } from "./instrument";
+import { Grid, Slider, Select, RecordButton, PlayButton, BpmInput } from './controls';
+import * as Synth from "./synth";
 import * as Adapters from './adapters';
 import { Transport } from 'tone';
 import patterns from './patterns.json';
@@ -31,7 +31,7 @@ const keys = [
 
 const defaultFilter = {
   type: 'lowpass', // What type of filter is applied.
-  frequency: 400,       // The frequency, in hertz, to which the filter is applied.
+  frequency: 250,       // The frequency, in hertz, to which the filter is applied.
   q: 10,         // Q-factor.  No one knows what this does. The default value is 1. Sensible values are from 0 to 10.
   // env       : {          // Filter envelope.
   //     frequency : 880, // If this is set, filter frequency will slide from filter.frequency to filter.env.frequency when a note is triggered.
@@ -79,7 +79,42 @@ class App extends Component {
       hold: Adapters.hold(controls.hold),
     }
 
+    const settings = {
+      source: 'sine', // sine, square, triangle, sawtooth
+      volume: 0.25,
+      env,
+      hold: '16n',
+      // filter: defaultFilter,
+      // filter  : {
+      //   type      : 'lowpass', // What type of filter is applied.
+      //   frequency : 400,       // The frequency, in hertz, to which the filter is applied.
+      //   q         : 40,         // Q-factor.  No one knows what this does. The default value is 1. Sensible values are from 0 to 10.
+      //   // env       : {          // Filter envelope.
+      //   //     frequency : 880, // If this is set, filter frequency will slide from filter.frequency to filter.env.frequency when a note is triggered.
+      //   //     attack    : 0.5  // Time in seconds for the filter frequency to slide from filter.frequency to filter.env.frequency
+      //   // }
+      // },
+      // delay: {
+      //   delayTime: .25,  // Time in seconds between each delayed playback.
+      //   wet: .5, // Relative volume change between the original sound and the first delayed playback.
+      //   feedback: .25, // Relative volume change between each delayed playback and the next.
+      // },
+      // vibrato: { // A vibrating pitch effect.  Only works for oscillators.
+      //   shape: 'sine', // shape of the lfo waveform. Possible values are 'sine', 'sawtooth', 'square', and 'triangle'.
+      //   magnitude: 40,      // how much the pitch changes. Sensible values are from 1 to 10.
+      //   speed: 4,      // How quickly the pitch changes, in cycles per second.  Sensible values are from 0.1 to 10.
+      //   attack: 0       // Time in seconds for the vibrato effect to reach peak magnitude.
+      // },
+      // tremolo: { // A vibrating volume effect.
+      //   shape: 'sine', // shape of the lfo waveform. Possible values are 'sine', 'sawtooth', 'square', and 'triangle'.
+      //   magnitude: 0.5,      // how much the volume changes. Sensible values are from 1 to 10.
+      //   speed: 4,      // How quickly the volume changes, in cycles per second.  Sensible values are from 0.1 to 10.
+      //   attack: 0       // Time in seconds for the tremolo effect to reach peak magnitude.
+      // },
+    }
+
     this.state = {
+      settings,
       score: props.score,
       dragging: false,
       activeBeat: 0,
@@ -106,28 +141,26 @@ class App extends Component {
     this.updateBase = this.updateBase.bind(this);
     this.updateScaleName = this.updateScaleName.bind(this);
     this.updateSource = this.updateSource.bind(this);
-    this.UpdateFilterValue = this.UpdateFilterValue.bind(this);
     this.updateFilterType = this.updateFilterType.bind(this);
+    this.updateCutoff = this.updateCutoff.bind(this);
     this.updateQ = this.updateQ.bind(this);
     this.updateBPM = this.updateBPM.bind(this);
+    this.updateNotelength = this.updateNotelength.bind(this);
     this.savePattern = this.savePattern.bind(this);
     this.saveSynth = this.saveSynth.bind(this);
     this.onMouseDown = this.onMouseDown.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
   }
 
-  componentWillMount() {
-    // setInterval(this.tick, 125);
-
+  componentDidMount() {
     Transport.scheduleRepeat(this.tick, '16n');
-    Transport.start()
   }
 
   tick() {
     this.setState(({ activeBeat, score, scale }) => {
       const newBeat = activeBeat < score.length - 1 ? activeBeat + 1 : 0;
       const notes = scale.filter((x, i) => score[newBeat][i]);
-      play(notes, this.state.settings);
+      Synth.play(notes, this.state.settings);
 
       return {
         activeBeat: newBeat,
@@ -182,8 +215,7 @@ class App extends Component {
     this.updateScale({ scaleName: value });
   }
 
-
-  UpdateFilterValue(value) {
+  updateCutoff(value){
     const { settings } = this.state;
     if (!settings.filter) return;
     settings.filter.frequency = value;
@@ -212,6 +244,11 @@ class App extends Component {
     this.setState({ settings, activeSynth: null });
   }
 
+  updateNotelength({ value }){
+    const { settings } = this.state;
+    this.setState({ settings: { ...settings, hold: value }, activeSynth: null })
+  }
+
   savePattern() {
     this.setState(({ patterns, score }) => {
       return {
@@ -271,6 +308,7 @@ class App extends Component {
       onMouseDown,
       onMouseUp,
       updateSetting,
+      updateBPM,
     } = this;
 
     const {
@@ -303,19 +341,17 @@ class App extends Component {
     const filterQValue = settings.filter && settings.filter.q ? settings.filter.q : 1;
 
     return (
-      <Provider value={{ toggle }}>
+      <Provider value={{ toggle, updateBPM }}>
         <div className="container" {...{
           onMouseDown,
           onMouseUp,
         }}>
           <Grid {...{ columns, activeColumn }} />
+          <PlayButton />
+          <RecordButton />
+          <h3 className="control-heading">BPM</h3>
+          <BpmInput bpm={120} />
           <div>
-            <h3 className="control-heading">BPM</h3>
-            <label htmlFor="bpm" className="slider">
-              <input type="range" min={40} max={240} name="bpm" defaultValue="120"
-                className="bpm range-slider__range"
-                onChange={(e) => this.updateBPM(parseInt(e.target.value))} />
-            </label>
             <div style={{margin: '1rem'}}>
               <a
                 onClick={this.savePattern}
@@ -345,6 +381,7 @@ class App extends Component {
                 )
               }
             </div>
+
             <div className="controls">
               <section>
                 <h3 className="control-heading">Wave Shape</h3>
@@ -391,7 +428,20 @@ class App extends Component {
                 <Slider name="sustain" value={sustain} min="1" max="100" {...{ updateSetting }} />
                 <Slider name="decay" value={decay} min="1" max="100" {...{ updateSetting }} />
                 <Slider name="release" value={release} min="1" max="100" {...{ updateSetting }} />
-                <Slider name="hold" value={hold} min="0" max="100" {...{ updateSetting }} />
+                <Slider name="hold" value={hold} min="0.1" max="100" {...{ updateSetting }} />
+                <Select
+                  className="select"
+                  classNamePrefix="select"
+                  defaultValue={{ value: '16', label: '16' }}
+                  options={[
+                    { value: '1', label: '1' },
+                    { value: '2', label: '2' },
+                    { value: '4', label: '4' },
+                    { value: '8', label: '8' },
+                    { value: '16', label: '16' },
+                  ]}
+                  onChange={this.updateNotelength}
+                />
 
               </section>
               <section>
@@ -411,7 +461,7 @@ class App extends Component {
                   <input type="range" min={1} max={5000} name="cutoff"
                     value={filterCutoffValue}
                     className="range-slider__range"
-                    onChange={(e) => this.UpdateFilterValue(parseInt(e.target.value))} />
+                    onChange={(e) => this.updateCutoff(parseInt(e.target.value))} />
                   cutoff
                  </label>
                 <label htmlFor="q" className="slider">