midi-sounds-react

View the Project on GitHub

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';
<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.

Reference

Component parameters

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

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

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

parameters

Play instruments

parameters

Play beat

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]
	]
]

Play loop

startPlayLoop(beats, bpm, density, fromBeat)

Use stopPlayLoop() to cancel play.

Live example

How to get help

Feel free to ask any help at project issues.