Package Exports

react-redux-webaudio

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-redux-webaudio) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-redux-webaudio

The Web Audio API, thinly wrapped for easy integration with React-Redux.

this package is still in progress, with very limited features... it does work though.

Installation

npm i react-redux-webaudio

Usage

import { audioContextProvider, audioActionCreators } from 'react-redux-webaudio';
// your other imports here ...

/*-~-~-~-~-~-~-~-~-~-~-~-~-~- YOUR REDUX-STORE -~-~-~-~-~-~-~-~-~-~-~-~-~-*/
const rootReducer = combineReducers({
  //  your reducers ...
  audioContextProvider
});
const store = createStore( rootReducer );


/*-~-~-~-~-~-~-~-~-~-~-~-~-~- YOUR CONTAINER -~-~-~-~-~-~-~-~-~-~-~-~-~-*/
const App = connect(
  store => store,
  dispatch => ({
    createGlobalAudioContext: () =>
      // you MUST do something like this before using any other actions!!
      dispatch(audioActionCreators.createGlobalAudioContext()),
    yourNoiseyAction: () => {
      // create some audio nodes
      dispatch(audioActionCreators.createOscillator('osc'));
      dispatch(audioActionCreators.createGain('gainNode'));
      // connect the nodes
      dispatch(audioActionCreators.connectAudioNodes('osc', 'gainNode'));
      dispatch(audioActionCreators.connectAudioNodes('gainNode'));
      // assign values to node params
      dispatch(audioActionCreators.setParam('osc.type', 'square'));
      dispatch(audioActionCreators.setParam('osc.frequency.value', 100));
      dispatch(audioActionCreators.oscillatorStart('osc', 0));
      dispatch(audioActionCreators.setParam('gainNode.gain.value', 0.1));
    }
  })
)(YourDumbComponent);

include audioContextProvider as one of the reducers in your redux store
you must dispatch the createGlobalAudioContext action to the audioContextProvider before you do anything else.
dispatch the included actions to use the web audio api

Currently Available Actions:

setParam

setParam('any.audio.node.param', 'theValueYouWantItToBe');

createGain

createGain('theNameOfYourNewGainNode');

createBiquadFilter

createBiquadFilter('theNameOfYourNewFilterNode');

oscillatorStart
createOscillator

createOscillator('theNameOfYourNewOscillatornNode');

connectAudioNodes

connectAudioNodes('connectThisNode', 'toThisNode');

connectNodeToParam

connectNodeToParam('connectThisNode', 'to.This.Param');

setValueAtTime

setValueAtTime('parameterToSetValueOf', Number('valueToGoTo'), Number('timeToSetValueAt'));

linearRampToValueAtTime

linearRampToValueAtTime('parameterToSetValueOf', Number('valueToRampTo'), Number('timeToReachEndOfRamp'));

closeAudioContext
resumeAudioContext
suspendAudioContext
createGlobalAudioContext

createGlobalAudioContext() // => creates an instance of window.AudioContext