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.
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.
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:
Add import
and place the component anywhere on the page
specifying the value of the attributes:
Sample Code App.js
You will get something like this page with one button and a component logo:
one piano note will sound on the button, a settings dialog will open by clicking on the logo:
Open an example in a browser.
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 :
or virtual instruments :
The code for all examples is available on GitHub .
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.
Available on page .
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 (
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:
one piano note will sound on the button, a settings dialog will open by clicking on the logo:
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 :
or virtual instruments :
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 .