npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

midi-sounds-react

v1.2.54

Published

Sounds for React musical applications.

Downloads

209

Readme

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