React-drum-machine NPM

React drum machine

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

Can be used in ReactJS applications.

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

// 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:

<script src="https://unpkg.com/react-drum-machine/lib/react-drum-machine.min.js"></script>

You can find the library on window.ReactDrumMachine.

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

<head>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.9.1/polyfill.js"></script>
<script src="https://fb.me/react-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://unpkg.com/react-drum-machine/lib/react-drum-machine.min.js"></script>
...
</head>

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)

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(
	<div>
		<button onClick={() => PubSub.publish('drum',{action:'play'})}>Play</button>
		<button onClick={() => PubSub.publish('drum',{action:'stop'})}>Stop</button>
		<DrumMachine song={song} />
	</div>,
	document.getElementById('main')
);

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

Run demo

Clone repository git clone https://github.com/studiolasso/react-drum-machine.git
Install dependencies cd react-drum-machine && npm i && cd demo && npm i
Execute demo npm start

API

`<ReactDrumMachine />`

Drum machine component. Display and play songs

Props

`song`

An object representing the song. Here is an example.

Song structure :

{
	"title": <String>, // song title
	"beatpermeasure": <Number>, // beats per measure
	"bpm": <Number>,
	"divisionperbeat": <Number>, // divisions per beat
	"instruments": [
	{
		"title": <String>, // instrument name
		"image": <String>, // image url, optional
		"sound": <String>, // sound url
		"bearer": <String> // token to get sound, optional,
		"bits": <[<Number>]> // 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 :

<ReactDrumMachine id="dm1" />
<ReactDrumMachine id="dm2" />

...

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

`onLoaded`

Callback triggered when <ReactDrumMachine /> 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(<Number>) : 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:

// 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. <ReactDrumMachine /> have 'drum' as default id. It can specified using id props (ex: <ReactDrumMachine id="dm1" />)

Second argument of PubSub.publish() take a object like this :

{
	action: <string> // action method name
	args: <object> // action payload 
}

Read reducers code to have details on payload sturctures

License

This project is licensed under the GPL3 license

pubsub-js react react-dom react-modal react-redux redux redux-actions redux-logger redux-saga

@infinitebrahmanuniverse/nolb-react-dr @everything-registry/sub-chunk-2552 @zalastax/nolb-react-dr

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago