React drum machine   

Drum machine made with :heart: and :muscle:.

Can be used in ReactJS applications.

Supports browsers with web audio

How to use it ?

NPM

With npm:

``
npm install --save react-drum-machine
`

Then, you can use a module bundler like webpack or browserify to import package

`js
// using an ES6 transpiler, like babel
import ReactDrumMachine from 'react-drum-machine'

// not using an ES6 transpiler
var ReactDrumMachine = require('react-drum-machine');
`

UMD

The UMD build is also available on unpkg:
`html

`
You can find the library on window.ReactDrumMachine.

Also you have to import React, ReactDOM and perhaps babel-polyfill from CDNs.
`html

...




...

`

To use JSX syntax, you can use Babel

Test it now !

Play with drum machine easily with this JSBin

Let's code

Here is a simple react app using ES6 module and syntax (Babel, webpack or browserify can help you)

`javascript
import React from 'react';
import ReactDOM from 'react-dom';

import DrumMachine from 'react-drum-machine';

const song = {
"title": "example",
"beatpermeasure": 4,
"bpm": 79,
"divisionperbeat": 4,
"instruments": [
{
"title": "hihat",
"image": "img/hihat.png",
"sound": "https://content.dropboxapi.com/1/files/auto/CyCdh_K3ClHat-01.wav",
"bearer": "JfnDpAnZcQ8AAAAAAAABYbt6Zvq6-U10DeFgzcZEbz7XYZrTv9ugPuuRl0ai9BFR",
"bits": [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1]
},
{
"title": "snare",
"image": "http://i.imgur.com/NwDw9lZ.png",
"sound": "https://content.dropboxapi.com/1/files/auto/snare.mp3",
"bearer": "JfnDpAnZcQ8AAAAAAAABYbt6Zvq6-U10DeFgzcZEbz7XYZrTv9ugPuuRl0ai9BFR",
"bits": [0,0,0,0,1,1,1,1,1,0,0,0,0,1,1,1,1]
},
{
"title": "kick",
"image": "http://i.imgur.com/CmsdE9k.png",
"sound": "https://content.dropboxapi.com/1/files/auto/kick.mp3",
"bearer": "JfnDpAnZcQ8AAAAAAAABYbt6Zvq6-U10DeFgzcZEbz7XYZrTv9ugPuuRl0ai9BFR",
"bits": [1,1,1,1,0,1,0,1,0,0,0,0,0,1,1,1,1]
}
]
}

ReactDOM.render(


,
document.getElementById('main')
);
`

Ensure you have an element with id main in your html file

Run demo

1. Clone repository git clone https://github.com/studiolasso/react-drum-machine.git

2. Install dependencies cd react-drum-machine && npm i && cd demo && npm i

3. Execute demo npm start

API

Drum machine component. Display and play songs

$3

#### song
An object representing the song. Here is an example.

Song structure :

`js
{
"title": , // song title
"beatpermeasure": , // beats per measure
"bpm": ,
"divisionperbeat": , // divisions per beat
"instruments": [
{
"title": , // instrument name
"image": , // image url, optional
"sound": , // sound url
"bearer": // token to get sound, optional,
"bits": <[]> // array of bits (0 or 1)
}]
}
`

After component is mounted, song can be changed.

#### divisionSize
Size in pixel of a division. Default is 20 pixels.

#### id
Drum machine can be controlled with publish/subscribe mechanism.

If you have multiple instances of drum machine, you can define an id for each one and target a specific instance when you publish an action. Here is an example :

`



...

PubSub.publish('dm1', {action:'play'});
PubSub.publish('dm2', {action:'stop'});
`

#### onLoaded
Callback triggered when is mounted. It passes 3 arguments :
- state: actual state of the component. Read reducers code to have more details on structure
- actions: all actions. Useful to interact with drum machine.
- infoAPI: a set of methods to get informations about elapsed time, current beat, song size, etc ...
- getElapsedTime() : returns elapsed time in seconds
- getCurrentBeat() : returns current beat
- getCurrentDivision() : returns current division
- elapsedTimeToSize() : returns convertion of elapsed time to pixels
- sizeToTime() : returns convertion of size in argument into seconds
- getSongSize() : returns size of song in pixels

#### onChange
Callback triggered when state changes. It passes state in argument.

PubSub

publish/subscribe object to trigger drum machine actions. Here is some examples:

`js
// trigger action play
PubSub.publish('drum',{action:'play'});

// trigger action stop
PubSub.publish('drum',{action:'stop'});
`

First argument of PubSub.publish() helps to target drum machine instances. have 'drum' as default id. It can specified using id props (ex: )

Second argument of PubSub.publish() take a object like this :
`js
{
action: // action method name
args: