Sounds for React musical applications.
npm install midi-sounds-react
{
"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.
(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)
``