react-audio-tools

![Travis]()
![npm]()
![npm]()
![GitHub last commit]()

A set of React components to build things with the webAudio/webMidi API.

Demo app

http://react-audio-tools.surge.sh/

Notice

This is a very young library and is still in constant development. Do not expect a stable release just yet -- things will break.

install

npm i react-audio-tools --save

usage

Here's the full code from our demo application:

``js

class App extends Component { state = {}

constructor() { super(); this.state = { keyboardLayout: "azerty", useMidiController: false, /** * Effects,... are all controlled components. * Saving settings, providing defaults,... should be trivial to implement now. * Do note that you must supply ALL params should you wish to provide your own defaults. * We will throw an error if you don't */ tremoloParams: { frequency: 2, depth: 100, spread: 0, wet: 100, }, tremoloEnabled: true, chorusEnabled: false, distortionEnabled: false, pingPongDelayEnabled: false, reverbEnabled: false, distortionParams: { distortion: 1, wet: 50, }, volume: -5, }; }

render() { const { useMidiController, keyboardLayout } = this.state;

return (


          Toggle between midi and computerKeyboard:


        
          Set keyboard layout:
          
          
        
        {
          useMidiController ? (
            
              {msg => }
            
          ) : (
            
              {msg => }
            
          )
        }
                  input={"monosynth"}
          output={"tremolo"}
          onChange={params => this.setState({ tremoloParams: params })}
          params={this.state.tremoloParams}
          onEnableChange={value => this.setState({ tremoloEnabled: value })}
          enabled={this.state.tremoloEnabled}
        />
                  input={"tremolo"}
          output={"chorus"}
          onChange={params => this.setState({ chorusParams: params })}
          params={this.state.chorusParams}
          onEnableChange={value => this.setState({ chorusEnabled: value })}
          enabled={this.state.chorusEnabled}
        />
                  input={"chorus"}
          output={"reverb"}
          onChange={params => this.setState({ reverbParams: params })}
          params={this.state.reverbParams}
          onEnableChange={value => this.setState({ reverbEnabled: value })}
          enabled={this.state.reverbEnabled}
        />
                  input={"reverb"}
          output={"pingPongDelay"}
          onChange={params => this.setState({ pingPongDelayParams: params })}
          params={this.state.pingPongDelayParams}
          onEnableChange={value => this.setState({ pingPongDelayEnabled: value })}
          enabled={this.state.pingPongDelayEnabled}
        />
                  input={"pingPongDelay"}
          output={"distortion"}
          onChange={params => this.setState({ distortionParams: params })}
          params={this.state.distortionParams}
          onEnableChange={value => this.setState({ distortionEnabled: value })}
          enabled={this.state.distortionEnabled}
        />
        

                      input={"distortion"}
            volume={this.state.volume}
            onVolumeChange={value => this.setState({ volume: value })}
          />
        

      
    );
  }
}

usage

Here's the full code from our demo application:

``js

class App extends Component {
  state = {}

  constructor() {
    super();
    this.state = {
      keyboardLayout: "azerty",
      useMidiController: false,
      /**
       * Effects,... are all controlled components.
       * Saving settings, providing defaults,... should be trivial to implement now.
       * Do note that you must supply ALL params should you wish to provide your own defaults.
       * We will throw an error if you don't
       */
      tremoloParams: {
        frequency: 2,
        depth: 100,
        spread: 0,
        wet: 100,
      },
      tremoloEnabled: true,
      chorusEnabled: false,
      distortionEnabled: false,
      pingPongDelayEnabled: false,
      reverbEnabled: false,
      distortionParams: {
        distortion: 1,
        wet: 50,
      },
      volume: -5,
    };
  }

  render() {
    const { useMidiController, keyboardLayout } = this.state;

    return (


          Toggle between midi and computerKeyboard:

Set keyboard layout:

{
useMidiController ? (

{msg => }

) : (

{msg => }

)
}

input={"monosynth"}
output={"tremolo"}
onChange={params => this.setState({ tremoloParams: params })}
params={this.state.tremoloParams}
onEnableChange={value => this.setState({ tremoloEnabled: value })}
enabled={this.state.tremoloEnabled}
/>

input={"tremolo"}
output={"chorus"}
onChange={params => this.setState({ chorusParams: params })}
params={this.state.chorusParams}
onEnableChange={value => this.setState({ chorusEnabled: value })}
enabled={this.state.chorusEnabled}
/>

input={"chorus"}
output={"reverb"}
onChange={params => this.setState({ reverbParams: params })}
params={this.state.reverbParams}
onEnableChange={value => this.setState({ reverbEnabled: value })}
enabled={this.state.reverbEnabled}
/>

input={"reverb"}
output={"pingPongDelay"}
onChange={params => this.setState({ pingPongDelayParams: params })}
params={this.state.pingPongDelayParams}
onEnableChange={value => this.setState({ pingPongDelayEnabled: value })}
enabled={this.state.pingPongDelayEnabled}
/>

input={"pingPongDelay"}
output={"distortion"}
onChange={params => this.setState({ distortionParams: params })}
params={this.state.distortionParams}
onEnableChange={value => this.setState({ distortionEnabled: value })}
enabled={this.state.distortionEnabled}
/>

input={"distortion"}
volume={this.state.volume}
onVolumeChange={value => this.setState({ volume: value })}
/>

);
}
}

Dist Tags

Demo app

Notice

install

usage

react-audio-tools

Dist Tags

Demo app

Notice

install

usage