initial commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-0"]
+}

.eslintrc

@@ -0,0 +1 @@
+ "extends": "airbnb"

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+lib

CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+This project adheres to [Semantic Versioning](http://semver.org/).
+Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/FormidableLabs/react-music/releases) page.

LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,174 @@
+<h1 align="center">react-music</h1>
+
+<h4 align="center">
+  Make music with React!
+</h4>
+
+***
+
+![http://i.imgur.com/2t1NPJy.png](http://i.imgur.com/2t1NPJy.png)
+
+> Note: This library is super experimental and alpha. It is the first release of a weekend project. I'll be working to make it better, but the current release is to just let people play around with it.
+
+## Get Started
+
+The easiest way to get started is to clone this repo and run `npm start`. The demo song will be running at [http://localhost:3000](http://localhost:3000). You can open up the `/demo/index.js` file and edit your song there, using the API below as reference. 
+
+That said, you can import the primitives yourself and run your own build setup, but be aware that hot reloading doesn't work, and runtime prop changes don't propogate yet.
+
+### Basic Concepts
+
+#### Song
+
+The first thing you want to do is create a `Song` component. This is the controller for your entire beat. It takes a `tempo` prop where you specify a BPM, and an `autoplay` prop that configures whether the song should play right away, or wait to press the play button. Set up it like so:
+
+```js
+<Song tempo={90}>
+
+</Song>
+```
+
+#### Sequencer
+
+
+Direct children of `Song` must always be `Sequencer` components. Your `Sequencer`'s are what you use to define a looping section. They take two props. The first `resolution` is the resolution of steps in your sequence array. This defaults to `16`, which is a sixteenth note. The second is `bars` which is how many bars the sequencer sequences before it loops. You can have multiple sequencers in your song, and the main Song loop is based upon the sequencer with the largest number of bars. Here is an example:
+
+```js
+<Song tempo={90}>
+  <Sequencer resolution={16} bars={1}>
+
+  </Sequencer>
+</Song>
+```
+
+Once you have a `Song` and a `Sequencer` component, you can add instruments to your `Sequencer`. Currently, two instruments are provided, `Synth` and `Sampler`. Lets take a look at how these work:
+
+#### Sampler
+
+The sampler component is used to play audio samples. To use it, you must at very least provide two props, `sample` and `steps`.`sample` is a path to an audio file, and `steps` is an array of indexes that map to the steps available based upon the `resolution` and `bars` props of your sequencer. So if you wanted a 4/4 kick line, you would do this:
+
+```js
+<Song tempo={90}>
+  <Sequencer resolution={16} bars={1}>
+    <Sampler
+	  sample="/samples/kick.wav"
+	  steps={[0, 4, 8, 12]}
+    />
+  </Sequencer>
+</Song>
+```
+
+#### Synth
+
+The `Synth` component is used to create an oscillator and play it on steps, just like the `Sampler` does. To use it, you must provide two props, `type` and `steps`. Valid types are `sine`, `square`, `triangle` and `sawtooth`. The `Synth` component also takes an `envelope` prop, where you can specify your ASDR settings. The shape of the `step` prop is a bit different for the `Synth` component, as you must specify an array in the format of `[ step, duration, note || [notes] ]`. The `duration` portion specifies duration in steps. The `note` portion is a string of a musical note and octave like "a4" or "c#1", and for chords, can be an array of the same notes. This would look like:
+
+```js
+<Song tempo={90}>
+  <Sequencer resolution={16} bars={1}>
+    <Synth
+      type="square"
+	  steps={[
+	    [0, 2, "c3"],
+	    [8, 2, ["c3", "d#3", "f4"]]
+	  ]}
+    />
+  </Sequencer>
+</Song>
+```
+
+## Props API
+
+### Song
+
+**tempo** (_number_) : Your song tempo
+
+**autoplay** (_boolean_) : Whether the song should start playing automatically
+
+### Sequencer
+
+**resolution** (_number_) : Step resolution for your sequence
+
+**bars** (_number_) : Number of bars in your sequence
+
+### Sampler
+
+**sample** (_number_) : Step resolution for your sequence
+
+**steps** (_array_) : Array of step indexes for the sample to be played at
+
+**volume** (_number_) : A number (0-100) specifying instrument volume
+
+**detune** (_number_) : A number (in cents) specifying instrument detune
+
+**compressor** (_object_) : An object specifying compressor settings
+
+```js
+compressor={{
+  threshold: -24,
+  knee: 30,
+  ratio: 12,
+  attack: 0.003,
+  release: 0.25,
+}}
+```
+
+### Synth
+
+**type** (_string_) : Oscillator type. Accepts `square`, `triangle`, `sawtooth` & `sine`
+
+**steps** (_array_) : Array of step arrays for the notes to be played at. Accepts in array in the `[ step, duration, note || [notes] ]` format.
+
+```js
+// single note
+steps={[
+  [0, 2, "a2"]
+]}
+
+// chord
+steps={[
+  [0, 2, ["c2", "e2", "g2"]]
+]}
+```
+
+**volume** (_number_) : A number (0-100) specifying instrument volume
+
+**envelope** (_object_) : An object specifying envelope settings
+
+```js
+envelope={{
+  attack: 0.1,
+  sustain: 0.3,
+  decay: 20,
+  release: 0.5
+}}
+```
+
+**compressor** (_object_) : An object specifying compressor settings
+
+```js
+compressor={{
+  threshold: -24,
+  knee: 30,
+  ratio: 12,
+  attack: 0.003,
+  release: 0.25,
+}}
+```
+
+## Known Issues & Roadmap
+
+- Currently only the 4/4 time signature is supported
+- Hot reloading doesn't work
+- Post mount prop updates don't propagate to the parent song
+- The viz will be decoupled from the `Song` component, with an external API
+- `Synth` components need a filter prop
+- `Synth` presets need to be added
+- Record/Ouput audio file
+- Optional working mixing board alongside viz
+- Monophonic/Polyphonic prop settings and sample trigger modes
+- Note based detuning for Sampler
+- Sampler sample maps
+
+## License
+
+[MIT License](http://opensource.org/licenses/MIT)

demo/index.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Song, Sequencer, Sampler, Synth } from '../src';
+
+ReactDOM.render(
+  <Song tempo={180}>
+    <Sequencer resolution={16} bars={2}>
+      <Sampler
+        sample="/samples/kick.wav"
+        steps={[0, 4, 14]}
+      />
+      <Sampler
+        sample="/samples/snare.wav"
+        steps={[8, 24]}
+      />
+    </Sequencer>
+    <Sequencer resolution={16} bars={4}>
+      <Sampler
+        sample="/samples/hihat.wav"
+        steps={[
+          0, 4, 8, 12, 16, 20, 24, 28,
+          32, 36, 40, 44, 48, 52, 56, 60,
+        ]}
+        volume={80}
+      />
+    </Sequencer>
+    <Sequencer resolution={16} bars={8}>
+      <Synth
+        type="sawtooth"
+        volume={15}
+        envelope={{
+          attack: 0.01,
+          sustain: 0.2,
+          decay: 0,
+          release: 0.1,
+        }}
+        steps={[
+          [0, 2, 'a#2'],
+          [4, 2, 'a#2'],
+          [8, 1, 'a#3'],
+          [10, 1, 'a#3'],
+          [12, 1, 'a#3'],
+          [14, 1, 'a#3'],
+          [16, 2, 'g#2'],
+          [20, 2, 'g#2'],
+          [24, 1, 'g#3'],
+          [26, 1, 'g#3'],
+          [28, 1, 'g#3'],
+          [30, 1, 'g#3'],
+          [32, 2, 'f#2'],
+          [36, 2, 'f#2'],
+          [40, 1, 'f#3'],
+          [42, 1, 'f#3'],
+          [44, 1, 'f#3'],
+          [46, 1, 'f#3'],
+          [48, 2, 'd#2'],
+          [52, 2, 'd#2'],
+          [56, 1, 'd#3'],
+          [58, 1, 'd#3'],
+          [60, 1, 'd#3'],
+          [62, 1, 'd#3'],
+          [64, 8, 'a#2'],
+          [72, 8, 'a#3'],
+          [80, 8, 'g#2'],
+          [88, 8, 'g#3'],
+          [96, 8, 'f#2'],
+          [104, 8, 'f#3'],
+          [112, 8, 'd#2'],
+          [120, 8, 'd#3'],
+        ]}
+      />
+    </Sequencer>
+    <Sequencer resolution={16} bars={4}>
+      <Synth
+        type="sine"
+        volume={40}
+        envelope={{
+          attack: 0.1,
+          sustain: 0.5,
+          decay: 0,
+          release: 1,
+        }}
+        steps={[
+          [0, 1, 'a#1'],
+          [16, 1, 'g#1'],
+          [32, 1, 'f#1'],
+          [48, 1, 'd#1'],
+        ]}
+      />
+    </Sequencer>
+  </Song>,
+  document.getElementById('root')
+);

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-music",
+  "version": "0.0.1",
+  "description": "Make beats with react",
+  "main": "lib/index.js",
+  "scripts": {
+    "start": "webpack-dev-server --inline --port 3000 --content-base public/",
+    "build": "babel src -d lib --copy-files",
+    "lint": "eslint . --fix"
+  },
+  "author": "Ken Wheeler",
+  "license": "MIT",
+  "repository": "https://github.com/FormidableLabs/react-music",
+  "dependencies": {
+    "envelope-generator": "^3.0.0",
+    "freeverb": "^1.0.2",
+    "note-parser": "^2.0.0",
+    "web-audio-scheduler": "^1.1.0"
+  },
+  "peerDependencies": {
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.10.4",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "eslint": "^3.0.1",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.10.3",
+    "eslint-plugin-jsx-a11y": "^2.0.1",
+    "eslint-plugin-react": "^5.2.2",
+    "json-loader": "^0.5.4",
+    "postcss-loader": "^0.10.1",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.15.0"
+  }
+}

public/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Spectacle Editor Viewer</title>
+    <link rel="stylesheet" type="text/css" href="/index.css">
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src="/dist/bundle.js"></script>
+  </body>
+</html>