⚠️ mdlr is just a lil bb library right now ⚠️
⚠️ ~please contribute if it interests you~ ⚠️

• intent
• installation
• usage
• reference
• development

mdlr is an abstraction of synthesis via the web audio API in the form of composable React components. The focus of mdlr is the generation, processing, and modulation of synthesized audio.

While it draws inspiration from react-music, its goals differ. If react-music could be considered most equivalent to a synthesizer workstation, mdlr would be best compared to Max (perhaps its BEAP library in particular), or modular synthesizers. Nonetheless, mdlr draws inspiration from other javascript libraries and web audio API abstractions such as react-music and i_dropped_my_phone_the_screen_cracked

mdlr is not concerned with implementing methods of control like sequencers, MIDI input, or basic musical time structures. In fact, mdlr doesn't even implement musical pitch (since this is easily derived by other utilities like note-to-frequency) in favor of frequency. Decisions about control methodology, time structures, musical temperament, etc. are better made in the context of mdlr's use.

via npm:

npm install --save mdlr

or via yarn:

yarn add mdlr

To create a component that renders a sawtooth carrier oscillation at a frequency specified by its freq prop with a 30 Hz sine oscillation modulating its frequency and a second 2 Hz sine oscillation modulating its amplitude:

import React from 'react';
import { AudioContext, Output, Oscillator, Modulation } from 'mdlr';

class ToneGenerator extends React.Component {
  render() {
    return (
      <AudioContext>
        <Output>
          <Oscillator frequency={this.props.freq} waveform="sawtooth">
            <Modulation parameter="frequency">
              <Oscillator frequency={30} />
            </Modulation>
            <Modulation parameter="amplitude">
              <Oscillator frequency={2} />
            </Modulation>
          </Oscillator>
        </Output>
      </AudioContext>
    );
  }
}

⚠️ documentation for components needed here! ⚠️

Yarn must be installed.

• Running yarn install in the components's root directory will install everything you need for development.

• yarn start will run a development server with the component's demo app at https://localhost:3000 with hot module reloading.

• yarn lint will run linter on scripts.
• yarn pretty will prettify scripts.
  • 🎉 this will also run automatically on commit! 🎉

• yarn test will run the tests once.

• yarn test:coverage will run the tests and produce a coverage report in coverage/.

• yarn test:watch will run the tests on every change.

• yarn build will build the component for publishing to npm and also bundle the demo app.

• yarn clean will delete built resources.