npm install react-drum-machineDrum machine made with :heart: and :muscle:.
Can be used in ReactJS applications.
Supports browsers with web audio
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');
`
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
Play with drum machine easily with this JSBin
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(
Ensure you have an element with id
main in your html fileRun demo
1. Clone repository
git clone https://github.com/studiolasso/react-drum-machine.git2. Install dependencies
cd react-drum-machine && npm i && cd demo && npm i3. Execute demo
npm startAPI
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: ``Read reducers code to have details on payload sturctures
This project is licensed under the GPL3 license