All Projects → FormidableLabs → React Music

FormidableLabs / React Music

Licence: mit
Make beats with React!

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Music

1keys
A 1 Kilobyte JavaScript Piano
Stars: ✭ 118 (-95.62%)
Mutual labels:  music, instrument
Dx7 Supercollider
My accurate Yamaha DX-7 clone. Programmed in Supercollider.
Stars: ✭ 395 (-85.35%)
Mutual labels:  music, instrument
Awesome Music Production
A curated list of software, services and resources to create and distribute music.
Stars: ✭ 340 (-87.39%)
Mutual labels:  music, instrument
Chordious
Fretboard diagram generator for fretted stringed instruments.
Stars: ✭ 22 (-99.18%)
Mutual labels:  music, instrument
Sonic Pi
Code. Music. Live.
Stars: ✭ 8,736 (+224.04%)
Mutual labels:  music, instrument
Jssynth
Make music in your browser with this synthesizer and sequencer
Stars: ✭ 25 (-99.07%)
Mutual labels:  music, instrument
Webaudiofont
Use full GM set of musical instruments to play MIDI and single sounds or effects. Support for reverberation and equaliser. No plugins, no Flash. Pure HTML5 implementation compatible with desktop and mobile browser. See live examples.
Stars: ✭ 600 (-77.74%)
Mutual labels:  music, instrument
Web Drum Sequencer
A drum machine and sequencer built with the Web Audio API, React, and Redux.
Stars: ✭ 117 (-95.66%)
Mutual labels:  music, instrument
108
A minimal beat machine played in the browser.
Stars: ✭ 128 (-95.25%)
Mutual labels:  music, instrument
Swift Radio Pro
Professional Radio Station App for iOS!
Stars: ✭ 2,644 (-1.93%)
Mutual labels:  music
Mozart
An optical music recognition (OMR) system. Converts sheet music to a machine-readable version.
Stars: ✭ 241 (-91.06%)
Mutual labels:  music
Khinsider
A script for khinsider mass downloads. Get video game soundtracks quickly and easily! Also a Python interface.
Stars: ✭ 232 (-91.39%)
Mutual labels:  music
Musicplayer
A music player with pretty ui/ux design.
Stars: ✭ 232 (-91.39%)
Mutual labels:  music
Godot Mixing Desk
A complete audio solution for Godot 3.2.x, making procedural sound and adaptive/procedural music possible with a few nodes and a couple lines of code.
Stars: ✭ 240 (-91.1%)
Mutual labels:  music
Gwion
🎵 strongly-timed musical programming language
Stars: ✭ 235 (-91.28%)
Mutual labels:  music
I dropped my phone the screen cracked
web audio, cracked.
Stars: ✭ 245 (-90.91%)
Mutual labels:  music
Neteasecloudmusicflac
根据网易云音乐的歌单, 下载flac无损音乐到本地. Download the FLAC music from Internet according to your NeteaseCloudMusic playlist.
Stars: ✭ 2,687 (-0.33%)
Mutual labels:  music
Openmpt
Official read-only git mirror of the OpenMPT and libopenmpt subversion repository at https://source.openmpt.org/. This repository may occasionally get rebased without further notice when subversion revision properties (commit message) get fixed in recent history after the fact. Be sure to rebase often in case you clone or fork it.
Stars: ✭ 231 (-91.43%)
Mutual labels:  music
Waveline Server
Simple self-hosted music streaming server
Stars: ✭ 248 (-90.8%)
Mutual labels:  music
Usb Midi Driver
USB MIDI Driver for Android 3.1 or later
Stars: ✭ 244 (-90.95%)
Mutual labels:  music

Maintenance Status

react-music

Make music with React!


http://i.imgur.com/2t1NPJy.png

Contents

Install

npm install react-music

Get Started

The easiest way to get started is to clone this repo and run npm start. The demo song will be running at http://localhost:3000. You can open up the /demo/index.js file and edit your song there, using the API below as reference.

That said, you can import the primitives yourself and run your own build setup if you want.

Basic Concepts

Song

The 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:

<Song tempo={90}>

</Song>

Sequencer

Your 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:

<Song tempo={90}>
  <Sequencer resolution={16} bars={1}>

  </Sequencer>
</Song>

Once you have a Song and a Sequencer component, you can add instruments to your Sequencer. Lets take a look at how these work:

Instruments

Sampler

The 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:

<Song tempo={90}>
  <Sequencer resolution={16} bars={1}>
    <Sampler
	  sample="/samples/kick.wav"
	  steps={[0, 4, 8, 12]}
    />
  </Sequencer>
</Song>

You can also provide an array for a step, where the second value is a tuning, from -12 to 12.

Synth

The 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:

<Song tempo={90}>
  <Sequencer resolution={16} bars={1}>
    <Synth
      type="square"
	  steps={[
	    [0, 2, "c3"],
	    [8, 2, ["c3", "d#3", "f4"]]
	  ]}
    />
  </Sequencer>
</Song>

Monosynth

The 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:

<Song tempo={90}>
  <Sequencer resolution={16} bars={1}>
    <Monosynth
      glide={0.5}
      type="square"
      steps={[
        [0, 5, "c3"],
        [4, 4, "c4"],
      ]}
    />
  </Sequencer>
</Song>

Effects

There 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:

<Song tempo={90}>
  <Sequencer resolution={16} bars={1}>
    <Reverb>
      <Delay>
        <Monosynth
          steps={[
            [0, 4, "c3"],
            [4, 4, "c4"],
          ]}
        />
      </Delay>
    </Reverb>
  </Sequencer>
</Song>

Effect Busses

If 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.

First you want to create a Bus component, and give it an identifier:

<Song tempo={90}>
  <Bus id="myBus"/>
</Song>

Next, 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:

<Song tempo={90}>
  <Delay dryLevel={0}>
    <Bus id="myBus"/>
  </Delay>
</Song>

Finally, to hook an instrument up to your bus, or several busses, add their id's to the busses prop on an instrument:

<Song tempo={90}>
  <Delay dryLevel={0}>
    <Bus id="myBus"/>
  </Delay>
  <Sampler
  	busses={['myBus']}
  	sample='/samples/kick.wav'
  	steps={[1,4,8,12]}
  />
</Song>

LFO

You 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.

<Song tempo={90}>
  <Synth
    type="square"
    steps={[
      [0, 2, "c3"],
      [8, 2, ["c3", "d#3", "f4"]]
    ]}
  >
    <LFO
      type="sine"
      frequency={0.05}
      connect={(c) => c.gain}
    />
  </Synth>
</Song>

API

Top Level


<Song />

playing (boolean) : Whether the song should start playing automatically

tempo (number) : Your song tempo

--

<Sequencer />

bars (number) : Number of bars in your sequence

resolution (number) : Step resolution for your sequence

Instruments


<Monosynth />

busses (array) : An array of Bus id strings to send output to

envelope (object) : An object specifying envelope settings

envelope={{
  attack: 0.1,
  sustain: 0.3,
  decay: 20,
  release: 0.5
}}

gain (number) : A number specifying instrument gain

glide (number) : Portamento length for overlapping notes

steps (array) : Array of step arrays for the notes to be played at

steps={[
  [0, 2, "a2"]
]}

transpose (number) : Positive or negative number for transposition of notes

type (string) : Oscillator type. Accepts square, triangle, sawtooth & sine

--

<Sampler />

busses (array) : An array of Bus id strings to send output to

detune (number) : A number (in cents) specifying instrument detune

gain (number) : A number specifying instrument gain

sample (string) : Path to an audio file

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 & 12).

--

<Synth />

busses (array) : An array of Bus id strings to send output to

envelope (object) : An object specifying envelope settings

envelope={{
  attack: 0.1,
  sustain: 0.3,
  decay: 20,
  release: 0.5
}}

gain (number) : A number specifying instrument gain

steps (array) : Array of step arrays for the notes to be played at. Accepts in array in the [ step, duration, note || [notes] ] format.

// single note
steps={[
  [0, 2, "a2"]
]}

// chord
steps={[
  [0, 2, ["c2", "e2", "g2"]]
]}

transpose (number) : Positive or negative number for transposition of notes

type (string) : Oscillator type. Accepts square, triangle, sawtooth & sine

Effects


<Bitcrusher />

bits (number)

bufferSize (number)

normfreq (number)

--

<Chorus />

bypass (number)

delay (number)

feedback (number)

rate (number)

--

<Compressor />

attack (number)

knee (number)

ratio (number)

release (number)

threshold (number)

--

<Delay />

bypass (number)

cutoff (number)

delayTime (number)

dryLevel (number)

feedback (number)

wetLevel (number)

--

<Filter />

Q (number)

frequency (number)

gain (number)

type (string)

--

<Gain />

amount (number)

--

<MoogFilter />

bufferSize (number)

cutoff (number)

resonance (number)

--

<Overdrive />

algorithmIndex (number)

bypass (number)

curveAmount (number)

drive (number)

outputGain (number)

--

<PingPong />

delayTimeLeft (number)

delayTimeRight (number)

feedback (number)

wetLevel (number)

--

<Reverb />

bypass (number)

dryLevel (number)

highCut (number)

impulse (string)

level (number)

lowCut (number)

wetLevel (number)

Special


<Analyser />

fftSize (number) : FFT Size value

onAudioProcess (function) : Callback function with audio processing data

smoothingTimeConstant (number) : Smoothing time constant

--

<Bus />

gain (number) : A number specifying Bus gain

id (string) : Bus ID

--

<LFO />

connect (function) : LFO property selection function

frequency (number) : LFO frequency

gain (number) : A number specifying LFO gain

type (string) : Oscillator type. Accepts square, triangle, sawtooth & sine

Known Issues & Roadmap

  • Currently only the 4/4 time signature is supported
  • Synth presets need to be added
  • Record/Ouput audio file
  • Optional working mixing board alongside viz
  • Sampler sample maps

License

MIT License

Maintenance Status

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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].