{"id":15108047,"url":"https://github.com/formidablelabs/react-music","last_synced_at":"2025-12-30T15:13:13.052Z","repository":{"id":44381466,"uuid":"66284712","full_name":"FormidableLabs/react-music","owner":"FormidableLabs","description":"Make beats with React!","archived":true,"fork":false,"pushed_at":"2020-08-20T05:18:04.000Z","size":699,"stargazers_count":2728,"open_issues_count":20,"forks_count":197,"subscribers_count":108,"default_branch":"master","last_synced_at":"2025-01-08T21:43:50.415Z","etag":null,"topics":["buses","instrument","lfo","music","react","reactjs"],"latest_commit_sha":null,"homepage":"http://reactmusic.surge.sh","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/FormidableLabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-22T15:32:05.000Z","updated_at":"2025-01-07T14:27:27.000Z","dependencies_parsed_at":"2022-07-14T13:01:09.368Z","dependency_job_id":null,"html_url":"https://github.com/FormidableLabs/react-music","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-music","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-music/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-music/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-music/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FormidableLabs","download_url":"https://codeload.github.com/FormidableLabs/react-music/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234402341,"owners_count":18826740,"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":["buses","instrument","lfo","music","react","reactjs"],"created_at":"2024-09-25T22:00:23.593Z","updated_at":"2025-09-27T07:30:24.432Z","avatar_url":"https://github.com/FormidableLabs.png","language":"JavaScript","readme":"[![Maintenance Status][maintenance-image]](#maintenance-status)\n\n\n\u003ch1 align=\"center\"\u003ereact-music\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\n  Make music with React!\n\u003c/h4\u003e\n\n***\n\n![http://i.imgur.com/2t1NPJy.png](http://i.imgur.com/2t1NPJy.png)\n\n## Contents\n\u003c!-- MarkdownTOC depth=3 autolink=true bracket=round --\u003e\n\n- [Install](#install)\n- [Get Started](#get-started)\n- [Basic Concepts](#basic-concepts)\n- [Instruments](#instruments)\n- [Effects](#effects)\n  - [Effect Busses](#effect-busses)\n- [LFO](#lfo)\n- [API](#api)\n  - [Top Level](#top-level)\n  - [Instruments](#instruments)\n  - [Effects](#effects-1)\n  - [Special](#special)\n- [Known Issues \u0026 Roadmap](#known-issues--roadmap)\n- [License](#license)\n\n\u003c!-- /MarkdownTOC --\u003e\n\n\n## Install\n\n`npm install react-music`\n\n## Get Started\n\nThe easiest way to get started is to clone this repo and run `npm start`. The demo song will be running at [http://localhost:3000](http://localhost:3000). You can open up the `/demo/index.js` file and edit your song there, using the API below as reference.\n\nThat said, you can import the primitives yourself and run your own build setup if you want.\n\n## Basic Concepts\n\n#### Song\n\nThe first thing you want to do is create a `Song` component. This is the controller for your entire beat. It takes a `tempo` prop where you specify a BPM, and an `playing` prop that configures whether the song should play right away, or wait to press the play button. Set up it like so:\n\n```js\n\u003cSong tempo={90}\u003e\n\n\u003c/Song\u003e\n```\n\n#### Sequencer\n\n\nYour `Sequencer`'s are what you use to define a looping section. They take two props. The first `resolution` is the resolution of steps in your sequence array. This defaults to `16`, which is a sixteenth note. The second is `bars` which is how many bars the sequencer sequences before it loops. You can have multiple sequencers in your song, and the main Song loop is based upon the sequencer with the largest number of bars. Here is an example:\n\n```js\n\u003cSong tempo={90}\u003e\n  \u003cSequencer resolution={16} bars={1}\u003e\n\n  \u003c/Sequencer\u003e\n\u003c/Song\u003e\n```\n\nOnce you have a `Song` and a `Sequencer` component, you can add instruments to your `Sequencer`. Lets take a look at how these work:\n\n## Instruments\n\n#### Sampler\n\nThe sampler component is used to play audio samples. To use it, you must at very least provide two props, `sample` and `steps`.`sample` is a path to an audio file, and `steps` is an array of indexes that map to the steps available based upon the `resolution` and `bars` props of your sequencer. So if you wanted a 4/4 kick line, you would do this:\n\n```js\n\u003cSong tempo={90}\u003e\n  \u003cSequencer resolution={16} bars={1}\u003e\n    \u003cSampler\n\t  sample=\"/samples/kick.wav\"\n\t  steps={[0, 4, 8, 12]}\n    /\u003e\n  \u003c/Sequencer\u003e\n\u003c/Song\u003e\n```\n\nYou can also provide an array for a step, where the second value is a tuning, from -12 to 12.\n\n#### Synth\n\nThe `Synth` component is used to create an oscillator and play it on steps, just like the `Sampler` does. To use it, you must provide two props, `type` and `steps`. Valid types are `sine`, `square`, `triangle` and `sawtooth`. The `Synth` component also takes an `envelope` prop, where you can specify your ASDR settings. The shape of the `step` prop is a bit different for the `Synth` component, as you must specify an array in the format of `[ step, duration, note || [notes] ]`. The `duration` portion specifies duration in steps. The `note` portion is a string of a musical note and octave like \"a4\" or \"c#1\", and for chords, can be an array of the same notes. This would look like:\n\n```js\n\u003cSong tempo={90}\u003e\n  \u003cSequencer resolution={16} bars={1}\u003e\n    \u003cSynth\n      type=\"square\"\n\t  steps={[\n\t    [0, 2, \"c3\"],\n\t    [8, 2, [\"c3\", \"d#3\", \"f4\"]]\n\t  ]}\n    /\u003e\n  \u003c/Sequencer\u003e\n\u003c/Song\u003e\n```\n\n#### Monosynth\n\nThe `Monosynth` component is a `Synth` component, but it only plays one note at a time. It also has a `glide` prop that specifies portamento length. So if two notes overlap, the monosynth glides up to the next value on that duration. Check out how:\n\n```js\n\u003cSong tempo={90}\u003e\n  \u003cSequencer resolution={16} bars={1}\u003e\n    \u003cMonosynth\n      glide={0.5}\n      type=\"square\"\n      steps={[\n        [0, 5, \"c3\"],\n        [4, 4, \"c4\"],\n      ]}\n    /\u003e\n  \u003c/Sequencer\u003e\n\u003c/Song\u003e\n```\n\n## Effects\n\nThere are a ton of new effects added in 1.0.0. You can compose effect chains by wrapping effects around your instruments. Here is an example of how you would do that:\n\n```js\n\u003cSong tempo={90}\u003e\n  \u003cSequencer resolution={16} bars={1}\u003e\n    \u003cReverb\u003e\n      \u003cDelay\u003e\n        \u003cMonosynth\n          steps={[\n            [0, 4, \"c3\"],\n            [4, 4, \"c4\"],\n          ]}\n        /\u003e\n      \u003c/Delay\u003e\n    \u003c/Reverb\u003e\n  \u003c/Sequencer\u003e\n\u003c/Song\u003e\n```\n\n### Effect Busses\n\nIf you want to define an effects bus, which is a set of effects that multiple instruments can send their output to, this is achieved with the `Bus` component.\n\nFirst you want to create a `Bus` component, and give it an identifier:\n\n```js\n\u003cSong tempo={90}\u003e\n  \u003cBus id=\"myBus\"/\u003e\n\u003c/Song\u003e\n```\n\nNext, wrap your bus with the effect chain you want to make available, similarly to the way you would wrap effects around an instrument. You generally want to do this with effects that have wet/dry control, and set the `dryLevel` to 0:\n\n```js\n\u003cSong tempo={90}\u003e\n  \u003cDelay dryLevel={0}\u003e\n    \u003cBus id=\"myBus\"/\u003e\n  \u003c/Delay\u003e\n\u003c/Song\u003e\n```\n\nFinally, to hook an instrument up to your bus, or several busses, add their id's to the `busses` prop on an instrument:\n\n```js\n\u003cSong tempo={90}\u003e\n  \u003cDelay dryLevel={0}\u003e\n    \u003cBus id=\"myBus\"/\u003e\n  \u003c/Delay\u003e\n  \u003cSampler\n  \tbusses={['myBus']}\n  \tsample='/samples/kick.wav'\n  \tsteps={[1,4,8,12]}\n  /\u003e\n\u003c/Song\u003e\n```\n\n## LFO\n\nYou know whats bananas? LFO. Thats what. You can use an oscillator to modify properties of your instruments and effects. This is done with the `LFO` component. Any node that you want to apply LFO to just needs it added as a child. Then you define a `connect` prop that returns a function that lets you select a parent AudioNode property to oscillate. See the following example.\n\n```js\n\u003cSong tempo={90}\u003e\n  \u003cSynth\n    type=\"square\"\n    steps={[\n      [0, 2, \"c3\"],\n      [8, 2, [\"c3\", \"d#3\", \"f4\"]]\n    ]}\n  \u003e\n    \u003cLFO\n      type=\"sine\"\n      frequency={0.05}\n      connect={(c) =\u003e c.gain}\n    /\u003e\n  \u003c/Synth\u003e\n\u003c/Song\u003e\n```\n\n## API\n\n### Top Level\n\n---\n\n#### \\\u003cSong /\u003e\n\n**playing** (_boolean_) : Whether the song should start playing automatically\n\n**tempo** (_number_) : Your song tempo\n\n--\n\n#### \\\u003cSequencer /\u003e\n\n**bars** (_number_) : Number of bars in your sequence\n\n**resolution** (_number_) : Step resolution for your sequence\n\n### Instruments\n\n---\n\n#### \\\u003cMonosynth /\u003e\n\n**busses** (_array_) : An array of `Bus` id strings to send output to\n\n**envelope** (_object_) : An object specifying envelope settings\n\n```js\nenvelope={{\n  attack: 0.1,\n  sustain: 0.3,\n  decay: 20,\n  release: 0.5\n}}\n```\n\n**gain** (_number_) : A number specifying instrument gain\n\n**glide** (_number_) : Portamento length for overlapping notes\n\n**steps** (_array_) : Array of step arrays for the notes to be played at\n\n```js\nsteps={[\n  [0, 2, \"a2\"]\n]}\n```\n\n**transpose** (_number_) : Positive or negative number for transposition of notes\n\n**type** (_string_) : Oscillator type. Accepts `square`, `triangle`, `sawtooth` \u0026 `sine`\n\n--\n\n#### \\\u003cSampler /\u003e\n\n**busses** (_array_) : An array of `Bus` id strings to send output to\n\n**detune** (_number_) : A number (in cents) specifying instrument detune\n\n**gain** (_number_) : A number specifying instrument gain\n\n**sample** (_string_) : Path to an audio file\n\n**steps** (_array_) : Array of step indexes for the sample to be played at. Accepts arrays for steps in order to provide a second argument for index based detune (in between -12 \u0026 12).\n\n--\n\n#### \\\u003cSynth /\u003e\n\n**busses** (_array_) : An array of `Bus` id strings to send output to\n\n**envelope** (_object_) : An object specifying envelope settings\n\n```js\nenvelope={{\n  attack: 0.1,\n  sustain: 0.3,\n  decay: 20,\n  release: 0.5\n}}\n```\n\n**gain** (_number_) : A number specifying instrument gain\n\n**steps** (_array_) : Array of step arrays for the notes to be played at. Accepts in array in the `[ step, duration, note || [notes] ]` format.\n\n```js\n// single note\nsteps={[\n  [0, 2, \"a2\"]\n]}\n\n// chord\nsteps={[\n  [0, 2, [\"c2\", \"e2\", \"g2\"]]\n]}\n```\n\n**transpose** (_number_) : Positive or negative number for transposition of notes\n\n**type** (_string_) : Oscillator type. Accepts `square`, `triangle`, `sawtooth` \u0026 `sine`\n\n\n### Effects\n\n---\n\n#### \\\u003cBitcrusher /\u003e\n\n**bits** (_number_)\n\n**bufferSize** (_number_)\n\n**normfreq** (_number_)\n\n\n--\n\n#### \\\u003cChorus /\u003e\n\n**bypass** (_number_)\n\n**delay** (_number_)\n\n**feedback** (_number_)\n\n**rate** (_number_)\n\n\n--\n\n#### \\\u003cCompressor /\u003e\n\n**attack** (_number_)\n\n**knee** (_number_)\n\n**ratio** (_number_)\n\n**release** (_number_)\n\n**threshold** (_number_)\n\n\n--\n\n#### \\\u003cDelay /\u003e\n\n**bypass** (_number_)\n\n**cutoff** (_number_)\n\n**delayTime** (_number_)\n\n**dryLevel** (_number_)\n\n**feedback** (_number_)\n\n**wetLevel** (_number_)\n\n\n--\n\n#### \\\u003cFilter /\u003e\n\n**Q** (_number_)\n\n**frequency** (_number_)\n\n**gain** (_number_)\n\n**type** (_string_)\n\n\n--\n\n#### \\\u003cGain /\u003e\n\n**amount** (_number_)\n\n\n--\n\n#### \\\u003cMoogFilter /\u003e\n\n**bufferSize** (_number_)\n\n**cutoff** (_number_)\n\n**resonance** (_number_)\n\n\n--\n\n#### \\\u003cOverdrive /\u003e\n\n**algorithmIndex** (_number_)\n\n**bypass** (_number_)\n\n**curveAmount** (_number_)\n\n**drive** (_number_)\n\n**outputGain** (_number_)\n\n--\n\n#### \\\u003cPingPong /\u003e\n\n**delayTimeLeft** (_number_)\n\n**delayTimeRight** (_number_)\n\n**feedback** (_number_)\n\n**wetLevel** (_number_)\n\n\n--\n\n#### \\\u003cReverb /\u003e\n\n**bypass** (_number_)\n\n**dryLevel** (_number_)\n\n**highCut** (_number_)\n\n**impulse** (_string_)\n\n**level** (_number_)\n\n**lowCut** (_number_)\n\n**wetLevel** (_number_)\n\n\n### Special\n\n---\n\n#### \\\u003cAnalyser /\u003e\n\n**fftSize** (_number_) : FFT Size value\n\n**onAudioProcess** (_function_) : Callback function with audio processing data\n\n**smoothingTimeConstant** (_number_) : Smoothing time constant\n\n--\n\n#### \\\u003cBus /\u003e\n\n**gain** (_number_) : A number specifying Bus gain\n\n**id** (_string_) : Bus ID\n\n--\n\n#### \\\u003cLFO /\u003e\n\n**connect** (_function_) : LFO property selection function\n\n**frequency** (_number_) : LFO frequency\n\n**gain** (_number_) : A number specifying LFO gain\n\n**type** (_string_) : Oscillator type. Accepts `square`, `triangle`, `sawtooth` \u0026 `sine`\n\n\n## Known Issues \u0026 Roadmap\n\n- Currently only the 4/4 time signature is supported\n- `Synth` presets need to be added\n- Record/Ouput audio file\n- Optional working mixing board alongside viz\n- Sampler sample maps\n\n\n## License\n\n[MIT License](http://opensource.org/licenses/MIT)\n\n### Maintenance Status\n\n**Archived:** This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!\n\n[maintenance-image]: https://img.shields.io/badge/maintenance-archived-red.svg\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Freact-music","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformidablelabs%2Freact-music","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Freact-music/lists"}