Sound in ReactJS

  • Tutorial
The ReactJS library is designed to create a UI. As a rule, the user interface is not only graphics, but also sound. New message in the messenger, warning about an error, pressing buttons, etc. - in full-fledged applications, such events are marked by some kind of audio effect.

image

You can use the midi-sounds-react component for sound effects in ReactJS . An example for evaluating the functionality of a component can be viewed (listened) on the test page .

Consider connecting and using a component in a project.

Environment setting


Install Node.js and ReactJS , then create a new project for tests.

Add a link to midi-sounds-react in your package.json. It should look something like this:

{
  "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"
  }
}

Add import

import MIDISounds from 'midi-sounds-react';

and place the component anywhere on the page

 (this.midiSounds = ref)} appElementName="root" instruments={[]} drums={[]} />

specifying the value of the attributes:

  • this.midiSounds - variable to refer to the component
  • appElementName - id of the main application div
  • instruments - an array with instrument numbers that will be loaded when the page is displayed
  • drums - an array with drum numbers that will be loaded when the page is displayed

Sample Code App.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 (
      
logo

Welcome to midi-sounds-react example 1

Press Play to play instrument sound.

(this.midiSounds = ref)} appElementName="root" instruments={[3]} />
); } } export default App;

You will get something like this page with one button and a component logo:

image

one piano note will sound on the button, a settings dialog will open by clicking on the logo:

image

Open an example in a browser.

Other examples


In addition to sound effects, the midi-sounds-react component can also be used to play musical fragments created on the fly , develop musical editors :

image

or virtual instruments :

image

The code for all examples is available on GitHub .

Limitations


For trouble-free operation of the component, it is advisable to use the Chrome or Safari browser.
For mobile browsers, echo (reverb) is too heavy a function and it is advisable to turn it off in mobile versions.

Source Code and Documentation


Available on page .

Also popular now: