midi-sounds-react

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.

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.