{"id":13768874,"url":"https://github.com/surikov/midi-sounds-react","last_synced_at":"2025-05-10T23:32:03.315Z","repository":{"id":47680781,"uuid":"117244286","full_name":"surikov/midi-sounds-react","owner":"surikov","description":"ReactJS component for musical and MIDI applications","archived":false,"fork":false,"pushed_at":"2018-04-23T17:14:54.000Z","size":1685,"stargazers_count":131,"open_issues_count":0,"forks_count":14,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-23T04:05:40.960Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/surikov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-12T13:29:05.000Z","updated_at":"2025-03-12T20:13:11.000Z","dependencies_parsed_at":"2022-09-13T01:24:41.926Z","dependency_job_id":null,"html_url":"https://github.com/surikov/midi-sounds-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surikov%2Fmidi-sounds-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surikov%2Fmidi-sounds-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surikov%2Fmidi-sounds-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surikov%2Fmidi-sounds-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surikov","download_url":"https://codeload.github.com/surikov/midi-sounds-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253497296,"owners_count":21917683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T16:01:27.228Z","updated_at":"2025-05-10T23:31:58.300Z","avatar_url":"https://github.com/surikov.png","language":"JavaScript","funding_links":[],"categories":["MIDI instruments"],"sub_categories":["Multi-instruments"],"readme":"# Component for [React](https://reactjs.org/).\n\nYou can use 1500 digitized musical instruments and percussions from free sound library to build musical application with React framework.\n\n## Examples\n\n- [how to preload and play an instrument](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example1/build)\n- [how to preload and play a drum](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example2/build)\n- [how to create selectable list of instruments and delay for loading](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example3/build)\n- [how to create selectable list of drum](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example4/build)\n- [how to play short musical fragments](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example5/build)\n- [how to create sequencer](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example6/build)\n- [how to use strumming](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example7/build)\n- [how to use strumming for guitar music](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example8/build)\n- [how to programmatically change properties of sound](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example9/build)\n- [how to attach sounds to piano keys](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example10/build)\n- [how to use independed channels](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example11/build)\n  \n[Sources of all examples](https://github.com/surikov/midi-sounds-react-examples/tree/master/examples)\n\n## Tutorial\n\nOpen Node.js command line window.\n\nCreate React application from [https://reactjs.org/tutorial/tutorial.html](https://reactjs.org/tutorial/tutorial.html)\n\nModify package.json to add dependency to **midi-sounds-react** component\n\n```\n{\n  \"name\": \"my-test\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"homepage\": \"https://myserver\",\n  \"dependencies\": {\n    \"react\": \"^16.2.0\",\n    \"react-dom\": \"^16.2.0\",\n    \"react-scripts\": \"1.1.0\",\n    \"midi-sounds-react\": \"^1.2.45\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test --env=jsdom\",\n    \"eject\": \"react-scripts eject\"\n  }\n}\n```\n\nInstall dependencies\n\n```\nnpm install\n```\n\nStart application\n\n```\nnpm start\n```\n\nNavigate browser to http://localhost:3000\n\nModify src/App.js to add an Component and button.\n\n```js\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\nimport MIDISounds from 'midi-sounds-react';\n\nclass App extends Component {\n  playTestInstrument() {\n\t\tthis.midiSounds.playChordNow(3, [60], 2.5);\n\t}\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cheader className=\"App-header\"\u003e\n          \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n          \u003ch1 className=\"App-title\"\u003eWelcome to midi-sounds-react example 1\u003c/h1\u003e\n        \u003c/header\u003e\n        \u003cp className=\"App-intro\"\u003ePress Play to play instrument sound.\u003c/p\u003e\n\t\t\u003cp\u003e\u003cbutton onClick={this.playTestInstrument.bind(this)}\u003ePlay\u003c/button\u003e\u003c/p\u003e\n\t\t\u003cMIDISounds ref={(ref) =\u003e (this.midiSounds = ref)} appElementName=\"root\" instruments={[3]} /\u003e\t\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n### Main parts\n\n```js\nimport MIDISounds from 'midi-sounds-react';\n```\n\n- import **midi-sounds-react** component\n\n```html\n\u003cMIDISounds \n\tref={(ref) =\u003e (this.midiSounds = ref)} \n\tappElementName=\"root\" instruments={[3]} \n\t/\u003e\n```\n\n- insert component into page\n\n```js\nthis.midiSounds.playChordNow(3, [60], 2.5);\n```\n\n- play sound\n\nSee [live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example1/build), download example from [https://github.com/surikov/midi-sounds-react-examples](https://github.com/surikov/midi-sounds-react-examples).\n\n## Reference\n\n### Component parameters\n\n```html\n\u003cMIDISounds \n\tref={(ref) =\u003e (this.midiSounds = ref)} \n\tappElementName=\"root\" \n\tinstruments={[111]} \n\tdrums={[2,33]} \n\t/\u003e\n```\n\n- this.midiSounds - variable to use component from code\n- appElementName - name of main div of application\n- instruments - array of instruments to preload\n- drums - array of drums to preload\n\n### Initializing\n\nMIDISounds will be initialized after first render. Use componentDidMount to rerender page with initialized component.\n\n```js\ncomponentDidMount() {\n\t\tconsole.log('rerender after init');\n\t\tthis.setState(this.state);\n\t}\n```\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example4/build)\n\n### Play continuous note sounds\n\nUse this.midiSounds.player.queueWaveTable to start sound and return reference to envelope.\n\nUse envelope.cancel() to stop sound.\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example10/build)\n\n### List of drums\n\nUse this.midiSounds.player.loader.drumsKeys() to get array of drums.\n\nUse this.midiSounds.player.loader.drumInfo(i).title to get readable drum name.\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example4/build)\n\n### List of instruments\n\nUse this.midiSounds.player.loader.instrumentKeys() to get array of drums.\n\nUse this.midiSounds.player.loader.instrumentInfo(i).title to get readable drum name.\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example3/build)\n\n### Load instrument\n\nUse this.midiSounds.cacheInstrument and this.midiSounds.cacheDrum to start instrument and drum loading.\n\nUse this.midiSounds.player.loader.waitLoad to wait till all instruments and drums are loaded.\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example3/build)\n\n### Change instrument and drum volume\n\nUse setInstrumentVolume(instrument, volume) and setDrumVolume(drum, volume)\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example9/build)\n\n### Change Master Volume\n\nUse setMasterVolume(n).\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example9/build)\n\n### Change Echo Level\n\nUse setEchoLevel(value).\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example9/build)\n\n### Change Equalizer\n\n- setBand32(level)\n- setBand64(level)\n- setBand128(level)\n- setBand256(level)\n- setBand512(level)\n- setBand1k(level)\n- setBand2k(level)\n- setBand4k(level)\n- setBand8k(level)\n- setBand16k(level)\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example9/build)\n\n### Cancel all sounds\n\nUse cancelQueue()\n\n### Time\n\nUse contextTime() to get current time of Audio context.\n\nHow to calculate musical durations\n\n```\nvar bpm = 120;\nvar N = 4 * 60 / bpm;\nvar duration16th = N/16;\n```\n\n### Play drums\n\n- playDrumsAt(when, drums)\n- playDrumsNow(drums)\n\nparameters\n\n- when - time \n- drums - array of drum numbers\n\n### Play instruments\n\n- playChordNow(instrument, pitches, duration)\n- playChordAt(when, instrument, pitches, duration)\n- playStrumUpNow(instrument, pitches, duration)\n- playStrumUpAt(when, instrument, pitches, duration)\n- playStrumDownAt(when, instrument, pitches, duration)\n- playStrumDownNow(instrument, pitches, duration)\n- playSnapNow(instrument, pitches, duration)\n- playSnapAt(when, instrument, pitches, duration)\n\nparameters\n\n- when - time \n- instrument - number of instrument\n- pitches - array of pitches\n- duration - durations\n\n### Play beat\n\n```\nplayBeatAt(when, beat, bpm)\n```\n\n- when - time\n- beat - array of drums and chords\n- bpm - beats per minute\n\nExample of beat array\n```\n[\n\t[\n\t\tdrum1\n\t\t,drum2\n\t]\n\t,[\n\t\t[guitar,[S6+1,S5+3,S4+3],1/4,down]\n\t\t[bass,[S6+1,S5+3,S4+3],1/4]\n\t]\n]\n```\n- drum1, drum2 - numbers of drums\n- guitar, bass - numbers of instruments\n- [S6+1,S5+3,S4+3] and [S6+1,S5+3,S4+3] - array with pitches\n- 1/4 - duration as part of full note for the bpm\n- down - 1|2|3 for strum down, strum up or snap\n\n### Play loop\n\n```\nstartPlayLoop(beats, bpm, density, fromBeat)\n```\n\n- beats - array of beat arrays\n- bpm - beats per minute\n- dencity - duration of row at array\n- fromBeat - start beat number\n\nUse stopPlayLoop() to cancel play.\n\n[Live example](https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example9/build)\n\n## How to get help\n\nFeel free to ask any help at project [issues](https://github.com/surikov/midi-sounds-react/issues).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurikov%2Fmidi-sounds-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurikov%2Fmidi-sounds-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurikov%2Fmidi-sounds-react/lists"}