Skip to content

bbc/r-audio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

r-audio

A library of React components for building Web Audio graphs.

Objectives

๐Ÿ‘‰ make Web Audio graph code more readable and representative of the graph shape

๐Ÿ‘‰ make it easier to create reusable graphs

๐Ÿ‘‰ make state management easier with React's one-way data bindings and single source of state

๐Ÿ‘‰ represent any arbitrary directed graphs in JSX

๐Ÿ‘‰ support all non-deprecated audio nodes including AudioWorklet

๐Ÿ‘‰ allow interspersed HTML components in audio components

Installation

npm install r-audio

Usage example

Stereo waveshaper + amplitude modulation on a WAV loop

<RAudioContext debug={true} onInit={ctx => this.audioContext = ctx}>
  <RPipeline>
    <RBufferSource buffer={this.state.buffer} loop/>
    <RSplitChannels channelCount={2}>
      <RPipeline>
        <RWaveShaper curve={this.makeDistortionCurve(200)} />
        <RConvolver buffer={this.state.buffer} />
        <RDynamicsCompressor threshold={-50} knee={40}/>
        <RGain gain={.5} />
      </RPipeline>
      <RPipeline>
        <ROscillator frequency={1} type="sine" detune={0} connectToParam="gain" />
        <RGain gain={1} />
      </RPipeline>
    </RSplitChannels>
  </RPipeline>
</RAudioContext>

Useful links

Development setup

npm install
npm run dev

The demo page will be served at localhost:8080. Use a recent version of Chrome or Firefox for the best experience.

Firefox Web Audio developer tool is especially handy (bear in mind Firefox does not support AudioWorklet as of 17 April 2018).