ReactJS Component for Musical and MIDI Applications

Component for React.

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


Sources of all examples


Open Node.js command line window.

Create React application from

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

export default App;

Main parts

import MIDISounds from 'midi-sounds-react';
  • import midi-sounds-react component
	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


Component parameters

	ref={(ref) => (this.midiSounds = ref)} 
  • 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


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

componentDidMount() {
		console.log('rerender after init');

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()


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)


  • 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)


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

Download Details:

Author: surikov

Source Code:

#react #reactjs #javascript

ReactJS Component for Musical and MIDI Applications
4.75 GEEK