Component for React.

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

Examples

- how to preload and play an instrument
- how to preload and play a drum
- how to create selectable list of instruments and delay for loading
- how to create selectable list of drum
- how to play short musical fragments
- how to create sequencer
- how to use strumming
- how to use strumming for guitar music
- how to programmatically change properties of sound
- how to attach sounds to piano keys
- how to use independed channels

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.

`js
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 (

Welcome to midi-sounds-react example 1

Press Play to play instrument sound.

Play

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

);
}
}

export default App;
`

$3

`js
import MIDISounds from 'midi-sounds-react';
`

- import midi-sounds-react component

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

- insert component into page

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

- play sound

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

Reference

$3

`html
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

$3

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

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

Live example

$3

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

Use envelope.cancel() to stop sound.

Live example

$3

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

$3

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

$3

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

$3

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

Live example

$3

Use setMasterVolume(n).

Live example

$3

Use setEchoLevel(value).

Live example

$3

- setBand32(level)
- setBand64(level)
- setBand128(level)
- setBand256(level)
- setBand512(level)
- setBand1k(level)
- setBand2k(level)
- setBand4k(level)
- setBand8k(level)
- setBand16k(level)

Live example

$3

Use cancelQueue()

$3

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;
`

$3

- playDrumsAt(when, drums)
- playDrumsNow(drums)

parameters

- when - time
- drums - array of drum numbers

$3

- 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

$3

`
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

$3

`
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.