Component for React.

You can use 1500 digitized musical instruments and percussions from free sound library to build musical application with React framework.

Examples

Sources of all examples

Tutorial

Open Node.js command line window.

Create React application from https://reactjs.org/tutorial/tutorial.html

Modify package.json to add dependency to midi-sounds-react component

{ "name": "my-test", "version": "0.1.0", "private": true, "homepage": "https://myserver", "dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0", "react-scripts": "1.1.0", "midi-sounds-react": "^1.2.45" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

Install dependencies

npm install

Start application

npm start

Navigate browser to http://localhost:3000

Modify src/App.js to add an Component and button.

import React , { Component } from 'react' ; import logo from './logo.svg' ; import './App.css' ; import MIDISounds from 'midi-sounds-react' ; class App extends Component { playTestInstrument () { this . midiSounds . playChordNow ( 3 , [ 60 ], 2.5 ); } render () { return ( < div className = "App" > < header className = "App-header" > < img src = { logo } className = "App-logo" alt = "logo" /> < h1 className = "App-title" > Welcome to midi - sounds - react example 1 < /h1 > < /header > < p className = "App-intro" > Press Play to play instrument sound . < /p > < p >< button onClick = { this . playTestInstrument . bind ( this )} > Play < /button></ p > < MIDISounds ref = {( ref ) => ( this . midiSounds = ref )} appElementName = "root" instruments = {[ 3 ]} /> < /div > ); } } export default App ;

Main parts

import MIDISounds from 'midi-sounds-react' ;

import midi-sounds-react component

<MIDISounds ref= {(ref) = > (this.midiSounds = ref)} appElementName="root" instruments={[3]} />

insert component into page

this . midiSounds . playChordNow ( 3 , [ 60 ], 2.5 );

play sound

See live example, download example from https://github.com/surikov/midi-sounds-react-examples.

Reference

Component parameters

<MIDISounds ref= {(ref) = > (this.midiSounds = ref)} appElementName="root" instruments={[111]} drums={[2,33]} />

this.midiSounds - variable to use component from code

appElementName - name of main div of application

instruments - array of instruments to preload

drums - array of drums to preload

Initializing

MIDISounds will be initialized after first render. Use componentDidMount to rerender page with initialized component.

componentDidMount () { console . log ( 'rerender after init' ); this . setState ( this . state ); }

Live example

Play continuous note sounds

Use this.midiSounds.player.queueWaveTable to start sound and return reference to envelope.

Use envelope.cancel() to stop sound.

Live example

List of drums

Use this.midiSounds.player.loader.drumsKeys() to get array of drums.

Use this.midiSounds.player.loader.drumInfo(i).title to get readable drum name.

Live example

List of instruments

Use this.midiSounds.player.loader.instrumentKeys() to get array of drums.

Use this.midiSounds.player.loader.instrumentInfo(i).title to get readable drum name.

Live example

Load instrument

Use this.midiSounds.cacheInstrument and this.midiSounds.cacheDrum to start instrument and drum loading.

Use this.midiSounds.player.loader.waitLoad to wait till all instruments and drums are loaded.

Live example

Change instrument and drum volume

Use setInstrumentVolume(instrument, volume) and setDrumVolume(drum, volume)

Live example

Change Master Volume

Use setMasterVolume(n).

Live example

Change Echo Level

Use setEchoLevel(value).

Live example

Change Equalizer

setBand32(level)

setBand64(level)

setBand128(level)

setBand256(level)

setBand512(level)

setBand1k(level)

setBand2k(level)

setBand4k(level)

setBand8k(level)

setBand16k(level)

Live example

Cancel all sounds

Use cancelQueue()

Time

Use contextTime() to get current time of Audio context.

How to calculate musical durations

var bpm = 120; var N = 4 * 60 / bpm; var duration16th = N/16;

Play drums

playDrumsAt(when, drums)

playDrumsNow(drums)

parameters

when - time

drums - array of drum numbers

Play instruments

playChordNow(instrument, pitches, duration)

playChordAt(when, instrument, pitches, duration)

playStrumUpNow(instrument, pitches, duration)

playStrumUpAt(when, instrument, pitches, duration)

playStrumDownAt(when, instrument, pitches, duration)

playStrumDownNow(instrument, pitches, duration)

playSnapNow(instrument, pitches, duration)

playSnapAt(when, instrument, pitches, duration)

parameters

when - time

instrument - number of instrument

pitches - array of pitches

duration - durations

Play beat

playBeatAt(when, beat, bpm)

when - time

beat - array of drums and chords

bpm - beats per minute

Example of beat array

[ [ drum1 ,drum2 ] ,[ [guitar,[S6+1,S5+3,S4+3],1/4,down] [bass,[S6+1,S5+3,S4+3],1/4] ] ]

drum1, drum2 - numbers of drums

guitar, bass - numbers of instruments

[S6+1,S5+3,S4+3] and [S6+1,S5+3,S4+3] - array with pitches

1/4 - duration as part of full note for the bpm

down - 1 2 3 for strum down, strum up or snap

Play loop

startPlayLoop(beats, bpm, density, fromBeat)

beats - array of beat arrays

bpm - beats per minute

dencity - duration of row at array

fromBeat - start beat number

Use stopPlayLoop() to cancel play.

Live example

How to get help

Feel free to ask any help at project issues.