You can use 1500 digitized musical instruments and percussions from free sound library to build musical application with React framework.
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;
import MIDISounds from 'midi-sounds-react';
<MIDISounds
ref={(ref) => (this.midiSounds = ref)}
appElementName="root" instruments={[3]}
/>
this.midiSounds.playChordNow(3, [60], 2.5);
See live example, download example from https://github.com/surikov/midi-sounds-react-examples.
<MIDISounds
ref={(ref) => (this.midiSounds = ref)}
appElementName="root"
instruments={[111]}
drums={[2,33]}
/>
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);
}
Use this.midiSounds.player.queueWaveTable to start sound and return reference to envelope.
Use envelope.cancel() to stop sound.
Use this.midiSounds.player.loader.drumsKeys() to get array of drums.
Use this.midiSounds.player.loader.drumInfo(i).title to get readable drum name.
Use this.midiSounds.player.loader.instrumentKeys() to get array of drums.
Use this.midiSounds.player.loader.instrumentInfo(i).title to get readable drum name.
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.
Use setInstrumentVolume(instrument, volume) and setDrumVolume(drum, volume)
Use setMasterVolume(n).
Use setEchoLevel(value).
Use cancelQueue()
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;
parameters
parameters
playBeatAt(when, beat, bpm)
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]
]
]
| down - 1 | 2 | 3 for strum down, strum up or snap |
startPlayLoop(beats, bpm, density, fromBeat)
Use stopPlayLoop() to cancel play.
Feel free to ask any help at project issues.